Navigation
See the header above for a complete responsive navigation example. On mobile (below 768px), it transforms into an animated hamburger menu.
Key features: Smooth CSS transitions, accessible ARIA attributes, and Tailwind's responsive utilities (hidden md:flex, md:hidden).
Buttons
Button Variants
Button Sizes
Icon Buttons
Rounded Buttons (Pill Style)
Rounded Button Sizes
Rounded Icon Buttons
Forms
Login Form
Sign In
Don't have an account? Sign up
Input Fields
Preferred Contact Method
Cards
Basic Cards
Simple Card
Basic card with title and description. Perfect for features or services.
Another Card
Consistent styling across all card components with subtle hover states.
Third Card
Minimal design with clear hierarchy and generous padding.
Stats Cards
Total Revenue
$45,231
+20.1% from last month
Active Users
2,350
+180.1% from last month
Conversion Rate
3.24%
+5.2% from last month
Image Cards
Project Alpha
Description of the project with key highlights and features.
Project Beta
Another project card with consistent layout and spacing.
Project Gamma
Third card showcasing the flexible card design system.
Tables
| Name | Role | Status | Actions | |
|---|---|---|---|---|
| John Doe | john@example.com | Admin | Active | |
| Jane Smith | jane@example.com | Developer | Active | |
| Mike Johnson | mike@example.com | Designer | Pending | |
| Sarah Wilson | sarah@example.com | Manager | Active |
Lists
Checklist
- Generous whitespace for breathing room
- Clear typography hierarchy
- Minimal color palette (black, white, grays)
- Perfect light/dark mode symmetry
- Tailwind CSS for rapid development
Features
Fast Performance
Optimized for speed with minimal CSS
Highly Customizable
Easy to adapt to your brand
Responsive Design
Works perfectly on all devices
Badges & Alerts
Status Badges
Tags
Alerts
Success
Your changes have been saved successfully.
Information
This is an informational message with helpful context.
Warning
Please review your settings before continuing.
Error
An error occurred while processing your request.
Neutral
This is a neutral informational message.
Data Visualization
Progress Bars
Bar Chart
Metrics Grid
Typography
Headings
Heading 1 - 48px Bold
Heading 2 - 30px Semibold
Heading 3 - 24px Semibold
Heading 4 - 20px Medium
Heading 5 - 18px Medium
Heading 6 - 16px Medium
Body Text
Large body text (18px) - Perfect for introductory paragraphs or emphasis. The quick brown fox jumps over the lazy dog.
Default body text (16px) - The standard for most content. Readable and comfortable for extended reading. The quick brown fox jumps over the lazy dog.
Small body text (14px) - Great for secondary information, captions, or supplementary details. The quick brown fox jumps over the lazy dog.
Muted text - Used for less important information with reduced visual weight while maintaining readability.
Font Weights
Normal (400) - Regular body text
Medium (500) - Slightly emphasized
Semibold (600) - Headings and emphasis
Bold (700) - Strong emphasis
Color System
Primary & Secondary Colors
Light Mode
Primary
black (#000000)
Secondary
gray-50 (#f9fafb)
Dark Mode
Primary
white (#ffffff)
Secondary
gray-950 (#030712)
Base Colors
Light Mode
Background
white (#ffffff)
Foreground
black (#000000)
Muted
gray-600 (#525252)
Border
gray-200 (#e5e7eb)
Dark Mode
Background
black (#000000)
Foreground
white (#ffffff)
Muted
gray-400 (#a3a3a3)
Border
gray-800 (#1f2937)
Semantic Colors
Success
Background
green-50 (#f0fdf4)
green-950 (#052e16)
Foreground
green-600 (#16a34a)
green-400 (#4ade80)
Badge
green-100 (#dcfce7)
green-900 (#14532d)
Info
Background
blue-50 (#eff6ff)
blue-950 (#172554)
Foreground
blue-600 (#2563eb)
blue-400 (#60a5fa)
Badge
blue-100 (#dbeafe)
blue-900 (#1e3a8a)
Warning
Background
yellow-50 (#fefce8)
yellow-950 (#422006)
Foreground
yellow-600 (#ca8a04)
yellow-400 (#facc15)
Badge
yellow-100 (#fef9c3)
yellow-900 (#713f12)
Error
Background
red-50 (#fef2f2)
red-950 (#450a0a)
Foreground
red-600 (#dc2626)
red-400 (#f87171)
Badge
red-100 (#fee2e2)
red-900 (#7f1d1d)
Neutral
Background
gray-50 (#f9fafb)
gray-950 (#030712)
Foreground
gray-600 (#4b5563)
gray-400 (#9ca3af)
Badge
gray-100 (#f3f4f6)
gray-800 (#1f2937)