Article Title
Author Mar 12, 2026
This is an article element, perfect for blog posts, news articles, or any self-contained content that can be distributed independently.
HTML & CSS
Showcase
UI Components
Ready-to-use components including selects, switches, badges, cards, avatars, and more
Select & Dropdown
Basic Select
Custom Dropdown
Searchable Select
Select with Icons
Switch / Toggle
Basic Switch
Switch with Label
Dark ModeEnable dark theme
Switch Sizes
Badges
Badge Variants
DefaultPrimarySuccessWarningErrorOutline
Badge with Icon
VerifiedNewClosedFeatured
Avatars
Avatar Sizes
SM
MD
LG
XL
Avatar with Status
JD
AK
MR
SK
Avatar Group
A
B
C
D
+5
Cards
Basic Card
Card Title
Card description goes here
This is the main content area of the card where you can add any content.
Product Card
Sale
Product Name
$99$79
Profile Card
JD
John Doe
Software Developer
125
Posts
1.2K
Followers
Buttons
Button Variants
Button with Icons
Button Sizes
Loading Button
Input Fields
Input with Label
Input with Icon
Input with Addon
https://
Input States
Textarea
Slider / Range
50
Navigation
Breadcrumb
Pagination
Tabs Navigation
Sidebar Navigation
Notifications & Alerts
Alert Messages
Info:This is an informational message.
Success:Operation completed successfully.
Error:Something went wrong. Please try again.
Toast Notification
Saved successfully
Your changes have been saved.
Typography
Text & Typography Elements
A complete showcase of HTML text elements and typography styles.
Click any card to view its code
HTML Headings (h1-h6)
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph & Inline Text Elements
Paragraph & Text
This is a paragraph with various text styles. You can use marked text, small text,deleted text, and inserted text.
Use inline code for code snippets, or Ctrl + S for keyboard keys.
HTML is the standard markup language. For variables use x = y + 2.
Blockquote Element
Blockquote
"The only way to do great work is to love what you do."
Code Block (pre + code)
Code Block
function greeting(name) {
return `Hello, ${name}!`;
}
console.log(greeting('World'));Text Formatting Tags
Text Formatting
Bold text and Strong text
Italic text and Emphasized text
Underlined text
Strikethrough text
H2O and E=mc2
This is an inline quote
Address & Time Elements
Forms
Form Elements & Inputs
All HTML form elements with beautiful styling and interactions.
Click any card to view its code
Text Input Types
Text Inputs
Number & Date Inputs
Number & Date
Selection Inputs
Selection
Checkboxes & Radio Buttons
Checkboxes & Radio
Textarea & File Upload
Textarea & File
Button Types & Variants
Buttons
Tables
Table Elements
HTML table elements with modern styling and responsive design.
Click any card to view its code
Complete HTML Table
Team Overview
A complete table with all standard elements
| Name | Role | Status | Revenue | Trend |
|---|---|---|---|---|
AJ Alice Johnson | Developer | Active | $12,450 | |
BS Bob Smith | Designer | Active | $9,200 | |
CW Carol Williams | Manager | Away | $15,800 | |
DB David Brown | Developer | Active | $11,300 | |
EM Eva Martinez | Analyst | Inactive | $8,750 | |
| Total | $57,500 | |||
Striped Table
Striped Table
| Product | Price |
|---|---|
| Widget A | $29 |
| Widget B | $49 |
| Widget C | $99 |
| Widget D | $149 |
Table with Caption
Compact Table with Caption
| Month | Users | Revenue |
|---|---|---|
| January | 1,234 | $12,340 |
| February | 1,456 | $14,560 |
| March | 1,789 | $17,890 |
Lists
List Elements
All types of HTML list elements with various styling options.
Click any card to view its code
Unordered List (ul)
Unordered List
- First item in the list
- Second item with more content
- Nested item one
- Nested item two
- Third item
- Fourth item
Ordered List (ol)
Ordered List
- Step one of the process
- Step two continues
- Sub-step a
- Sub-step b
- Step three
- Final step four
Description List (dl)
Description List
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
- JS
- JavaScript Programming Language
Custom Checkmark List
Custom Checkmark List
- Feature included
- Premium support
- Unlimited access
- Regular updates
Interactive Arrow List
Arrow List
- Getting started guide
- API documentation
- Best practices
- Advanced tutorials
Navigation Menu List
Navigation Menu
Media
Media Elements
Images, video, audio, and other embedded media elements.
Click any card to view its code
Figure & Figcaption
Picture Element
Picture Element
<picture>Responsive image container
Supports multiple sources
Video Element
Video Element
Click to play video
Audio Element
Audio Element
0:003:45
Audio player with controls
Canvas Element
Canvas Element
<canvas>Drawing surface
For 2D/3D graphics
SVG Element
SVG Element
Iframe Element
Iframe Element
<iframe>Embedded content
Maps, videos, external pages
Object & Embed Elements
Object & Embed Elements
<object>External resource
<embed>Plugin content
Animations
CSS Animations & Transitions
Beautiful CSS animations and transitions to bring your UI to life.
Click any card to view its code
Pulse Animation
Pulse
Bounce Animation
Bounce
Spin Animation
Spin
Ping Animation
Ping
Fade Animation
Fade
Scale Animation
Scale
Slide Animation
Slide
Wiggle Animation
Wiggle
Complex Animations
Loading Dots
Loading Dots
Skeleton Loading
Skeleton
Animated Progress Bar
Progress
Ripple Effect
Ripple
Typing Effect
Typing
Hello World!
Float Animation
Float
Hover Transitions
CSS Hover Transitions
Scale Up
Scale Down
Rotate
Skew
Shadow
Opacity
Border
Background
Translate Y
Translate X
Brightness
Grayscale
Interactive
Interactive Components
Interactive UI patterns built with HTML, CSS, and JavaScript.
Click any card to view its code
Accordion Component
Accordion
Tabs Component
Tabs
This is the overview tab content. It provides a general summary of the topic.
Modal / Dialog
Modal / Dialog
Click to see a modal overlay
Tooltip Component
Tooltip
Alert Components
Alerts
Warning
Please review before continuing.
Success
Operation completed successfully!
Progress & Meter Elements
Progress & Meter
Progress Bar65%
HTML Meter Element
Semantic
Semantic HTML Elements
HTML5 semantic elements for better accessibility and SEO.
Click any card to view its code
Article Element
<article>Section Element
<section>Section Element
Sections represent a thematic grouping of content, typically with a heading. Each section should have a clear purpose.
Aside Element
<aside>Nav Element
<nav>Details & Summary
<details> & <summary>Click to expand/collapse▼
This content is revealed when the details element is open. It's native HTML disclosure with no JavaScript needed!
Another collapsible section▼
More hidden content here. Perfect for FAQs!
Time & Data Elements
<time> & <data>Time Element
Event starts at
Data Element
Price: $99.99
Address Element
<address>Mark & WBR Elements
<mark> & <wbr>Text Highlighting
Search for HTML to findhighlighted results in documents.
Long words can use <wbr> for word
Ruby Annotation
<ruby> & <rt>Ruby Annotations
Used for showing pronunciation guides:
漢字
Complete Semantic Page Structure
Complete Semantic Page Structure<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<header>
<nav><!-- Navigation links --></nav>
</header>
<main>
<article>
<header><!-- Article header --></header>
<section><!-- Content section --></section>
<footer><!-- Article footer --></footer>
</article>
<aside><!-- Sidebar content --></aside>
</main>
<footer>
<address><!-- Contact information --></address>
</footer>
</body>
</html>