🎯 empfohlene Sammlungen
Balanced sample collections from various categories for you to explore
Tailwind CSS Samples
Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations
💻 Tailwind CSS Fundamentals html
🟢 simple
⭐
Basic Tailwind CSS utilities, layout, typography, and core concepts
⏱️ 20 min
🏷️ tailwind, css, utility-first, styling, components
Prerequisites:
HTML basics, CSS fundamentals, Understanding of utility-first CSS
<!-- Tailwind CSS Fundamentals Examples -->
<!-- 1. Basic HTML with Tailwind utilities -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Basics</title>
<!-- Tailwind CSS CDN for demo -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom configuration using tailwind.config.js equivalent */
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#64748b'
}
}
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Container with padding and centering -->
<div class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Typography examples -->
<section class="mb-12">
<h1 class="text-4xl font-bold text-gray-900 mb-4">Typography Examples</h1>
<p class="text-lg text-gray-600 mb-6">Explore different text utilities</p>
<div class="space-y-4">
<!-- Different text sizes and weights -->
<h2 class="text-2xl font-semibold">Font Sizes and Weights</h2>
<p class="text-xs font-light">Extra Small, Light</p>
<p class="text-sm font-normal">Small, Normal</p>
<p class="text-base font-medium">Base, Medium</p>
<p class="text-lg font-semibold">Large, Semibold</p>
<p class="text-xl font-bold">Extra Large, Bold</p>
<p class="text-2xl font-extrabold">2XL, Extra Bold</p>
<!-- Text alignment and decoration -->
<h3 class="text-xl font-medium mt-8 mb-4">Text Alignment & Decoration</h3>
<p class="text-left bg-blue-100 p-4 rounded mb-2">Left aligned text</p>
<p class="text-center bg-green-100 p-4 rounded mb-2">Center aligned text</p>
<p class="text-right bg-yellow-100 p-4 rounded mb-2">Right aligned text</p>
<p class="underline decoration-double text-red-600 mb-2">Underlined text</p>
<p class="line-through text-gray-500 mb-2">Strikethrough text</p>
<p class="italic text-blue-600">Italic text</p>
</div>
</section>
<!-- Color examples -->
<section class="mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Color Palette</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Text colors -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-4">Text Colors</h3>
<p class="text-gray-900 mb-2">Gray 900 (Primary text)</p>
<p class="text-gray-700 mb-2">Gray 700</p>
<p class="text-gray-500 mb-2">Gray 500</p>
<p class="text-gray-300 mb-2">Gray 300</p>
<p class="text-blue-600 mb-2">Blue 600</p>
<p class="text-red-600 mb-2">Red 600</p>
<p class="text-green-600 mb-2">Green 600</p>
</div>
<!-- Background colors -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-4">Background Colors</h3>
<div class="bg-gray-100 p-3 mb-2 rounded">Gray 100</div>
<div class="bg-gray-200 p-3 mb-2 rounded">Gray 200</div>
<div class="bg-blue-100 p-3 mb-2 rounded">Blue 100</div>
<div class="bg-red-100 p-3 mb-2 rounded">Red 100</div>
<div class="bg-green-100 p-3 mb-2 rounded">Green 100</div>
<div class="bg-yellow-100 p-3 mb-2 rounded">Yellow 100</div>
</div>
<!-- Border colors -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-4">Border Colors</h3>
<div class="border-4 border-gray-300 p-3 mb-2 rounded">Gray border</div>
<div class="border-4 border-blue-500 p-3 mb-2 rounded">Blue border</div>
<div class="border-4 border-red-500 p-3 mb-2 rounded">Red border</div>
<div class="border-4 border-green-500 p-3 mb-2 rounded">Green border</div>
<div class="border-4 border-purple-500 p-3 mb-2 rounded">Purple border</div>
</div>
</div>
</section>
<!-- Spacing examples -->
<section class="mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Spacing Utilities</h2>
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-4">Padding (p) and Margin (m)</h3>
<!-- Padding examples -->
<div class="mb-6">
<h4 class="font-medium mb-2">Padding Examples:</h4>
<div class="bg-blue-100 p-1 mb-2">p-1 (4px)</div>
<div class="bg-blue-200 p-2 mb-2">p-2 (8px)</div>
<div class="bg-blue-300 p-3 mb-2">p-3 (12px)</div>
<div class="bg-blue-400 p-4 mb-2">p-4 (16px)</div>
<div class="bg-blue-500 p-6 text-white">p-6 (24px)</div>
</div>
<!-- Margin examples -->
<div>
<h4 class="font-medium mb-2">Margin Examples:</h4>
<div class="bg-red-100 mb-4">mb-4 (16px margin bottom)</div>
<div class="bg-green-100 mt-4">mt-4 (16px margin top)</div>
<div class="bg-yellow-100 mx-auto w-32">mx-auto (horizontal center)</div>
</div>
</div>
</section>
<!-- Layout examples -->
<section class="mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Layout Utilities</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Display utilities -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-4">Display Utilities</h3>
<div class="block bg-gray-100 p-2 mb-2">Block element</div>
<div class="inline-block bg-gray-200 p-2 mr-2">Inline-block</div>
<div class="inline-block bg-gray-200 p-2">Inline-block</div>
<div class="flex bg-gray-100 p-4 mt-4">
<div class="flex-1 bg-blue-200 p-2 mr-2">Flex 1</div>
<div class="flex-2 bg-blue-300 p-2">Flex 2</div>
</div>
<div class="grid grid-cols-3 gap-2 mt-4">
<div class="bg-purple-200 p-2 text-center">Grid 1</div>
<div class="bg-purple-300 p-2 text-center">Grid 2</div>
<div class="bg-purple-400 p-2 text-center">Grid 3</div>
</div>
</div>
<!-- Sizing utilities -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-4">Sizing Utilities</h3>
<!-- Width examples -->
<div class="w-full bg-blue-500 text-white p-2 mb-2">w-full (100%)</div>
<div class="w-3/4 bg-blue-400 text-white p-2 mb-2">w-3/4 (75%)</div>
<div class="w-1/2 bg-blue-300 text-black p-2 mb-2">w-1/2 (50%)</div>
<div class="w-32 bg-green-500 text-white p-2 mb-2">w-32 (128px)</div>
<!-- Height examples -->
<div class="h-20 bg-red-500 text-white flex items-center justify-center mb-2">
h-20 (80px)
</div>
</div>
</div>
</section>
<!-- Button components -->
<section class="mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Button Components</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<!-- Basic buttons -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200">
Primary
</button>
<button class="bg-gray-500 hover:bg-gray-600 text-white font-semibold py-2 px-4 rounded transition duration-200">
Secondary
</button>
<button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded transition duration-200">
Success
</button>
<button class="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded transition duration-200">
Danger
</button>
<!-- Outline buttons -->
<button class="border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-semibold py-2 px-4 rounded transition duration-200">
Primary Outline
</button>
<button class="border-2 border-gray-500 text-gray-500 hover:bg-gray-500 hover:text-white font-semibold py-2 px-4 rounded transition duration-200">
Secondary Outline
</button>
<!-- Ghost buttons -->
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded transition duration-200">
Ghost
</button>
<!-- Disabled button -->
<button disabled class="bg-gray-300 text-gray-500 font-semibold py-2 px-4 rounded cursor-not-allowed">
Disabled
</button>
</div>
</section>
<!-- Card components -->
<section class="mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Card Components</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Basic card -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="bg-gray-200 h-32"></div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Card Title</h3>
<p class="text-gray-600">This is a basic card component with an image placeholder and some content.</p>
<button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded">
Learn More
</button>
</div>
</div>
<!-- Card with badge -->
<div class="bg-white rounded-lg shadow-md overflow-hidden relative">
<div class="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
NEW
</div>
<div class="bg-green-200 h-32"></div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Featured Card</h3>
<p class="text-gray-600">This card has a badge overlay on the top right corner.</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-2xl font-bold text-green-600">$29</span>
<button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded">
Buy Now
</button>
</div>
</div>
</div>
<!-- Minimal card -->
<div class="bg-white rounded-lg border border-gray-200 p-6">
<div class="w-12 h-12 bg-purple-500 rounded-full mb-4"></div>
<h3 class="text-xl font-semibold mb-2">Minimal Card</h3>
<p class="text-gray-600">A minimal card with a circular icon and simple border.</p>
<a href="#" class="mt-4 inline-block text-purple-600 hover:text-purple-800 font-semibold">
Read More →
</a>
</div>
</div>
</section>
</div>
</body>
</html>💻 Tailwind CSS Responsive Design html
🟡 intermediate
⭐⭐⭐
Responsive utilities, breakpoints, mobile-first design, and adaptive layouts
⏱️ 25 min
🏷️ tailwind, responsive, mobile-first, breakpoints, grid
Prerequisites:
Tailwind CSS basics, Responsive design concepts, CSS media queries understanding
<!-- Tailwind CSS Responsive Design Examples -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Responsive Design</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<!-- Responsive Navigation -->
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex-shrink-0">
<h1 class="text-xl font-bold text-blue-600">ResponsiveSite</h1>
</div>
<!-- Desktop Menu -->
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">
Home
</a>
<a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">
About
</a>
<a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">
Services
</a>
<a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">
Portfolio
</a>
<a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">
Contact
</a>
</div>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button class="text-gray-700 hover:text-blue-600 focus:outline-none p-2">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div class="md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">
Home
</a>
<a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">
About
</a>
<a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">
Services
</a>
<a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">
Portfolio
</a>
<a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">
Contact
</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section with Responsive Typography -->
<section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20 px-4">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
Responsive Design
<span class="block text-yellow-300">with Tailwind CSS</span>
</h1>
<p class="text-base sm:text-lg md:text-xl lg:text-2xl mb-8 max-w-2xl mx-auto">
Build beautiful, responsive websites faster with Tailwind's utility-first CSS framework.
Mobile-first approach with flexible breakpoints.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-8 rounded-lg transition duration-200">
Get Started
</button>
<button class="border-2 border-white text-white hover:bg-white hover:text-blue-600 font-bold py-3 px-8 rounded-lg transition duration-200">
Learn More
</button>
</div>
</div>
</section>
<!-- Responsive Grid Layout -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center text-gray-900 mb-12">
Responsive Grid Layouts
</h2>
<!-- Cards Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-200">
<div class="w-16 h-16 bg-blue-500 rounded-full mx-auto mb-4"></div>
<h3 class="text-lg font-semibold text-center mb-2">Mobile First</h3>
<p class="text-gray-600 text-center text-sm">
Start with mobile styles and progressively enhance for larger screens.
</p>
</div>
<!-- Card 2 -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-200">
<div class="w-16 h-16 bg-green-500 rounded-full mx-auto mb-4"></div>
<h3 class="text-lg font-semibold text-center mb-2">Flexible Grid</h3>
<p class="text-gray-600 text-center text-sm">
Adaptive grid systems that respond to different screen sizes seamlessly.
</p>
</div>
<!-- Card 3 -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-200">
<div class="w-16 h-16 bg-purple-500 rounded-full mx-auto mb-4"></div>
<h3 class="text-lg font-semibold text-center mb-2">Breakpoint System</h3>
<p class="text-gray-600 text-center text-sm">
Six default breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px).
</p>
</div>
<!-- Card 4 -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-200">
<div class="w-16 h-16 bg-red-500 rounded-full mx-auto mb-4"></div>
<h3 class="text-lg font-semibold text-center mb-2">Utility Classes</h3>
<p class="text-gray-600 text-center text-sm">
Apply responsive utilities directly in your HTML for rapid development.
</p>
</div>
<!-- Card 5 -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-200">
<div class="w-16 h-16 bg-yellow-500 rounded-full mx-auto mb-4"></div>
<h3 class="text-lg font-semibold text-center mb-2">Custom Breakpoints</h3>
<p class="text-gray-600 text-center text-sm">
Add custom breakpoints in tailwind.config.js for your specific needs.
</p>
</div>
<!-- Card 6 -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-200">
<div class="w-16 h-16 bg-indigo-500 rounded-full mx-auto mb-4"></div>
<h3 class="text-lg font-semibold text-center mb-2">Hover States</h3>
<p class="text-gray-600 text-center text-sm">
Responsive hover states that work consistently across all devices.
</p>
</div>
<!-- Card 7 -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-200">
<div class="w-16 h-16 bg-pink-500 rounded-full mx-auto mb-4"></div>
<h3 class="text-lg font-semibold text-center mb-2">Dark Mode</h3>
<p class="text-gray-600 text-center text-sm">
Built-in support for dark mode with responsive utilities.
</p>
</div>
<!-- Card 8 -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-200">
<div class="w-16 h-16 bg-gray-800 rounded-full mx-auto mb-4"></div>
<h3 class="text-lg font-semibold text-center mb-2">Performance</h3>
<p class="text-gray-600 text-center text-sm">
Optimized CSS generation with minimal bundle sizes.
</p>
</div>
</div>
</div>
</section>
<!-- Responsive Tables -->
<section class="py-16 px-4 bg-gray-100">
<div class="max-w-7xl mx-auto">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center text-gray-900 mb-12">
Responsive Data Tables
</h2>
<div class="overflow-x-auto shadow-md rounded-lg">
<table class="min-w-full bg-white">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden sm:table-cell">
Email
</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">
Role
</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden lg:table-cell">
Status
</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 bg-blue-500 rounded-full mr-3"></div>
<span class="font-medium">John Doe</span>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 hidden sm:table-cell">
[email protected]
</td>
<td class="px-4 py-4 whitespace-nowrap hidden md:table-cell">
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Developer</span>
</td>
<td class="px-4 py-4 whitespace-nowrap hidden lg:table-cell">
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
<button class="text-red-600 hover:text-red-900">Delete</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 bg-green-500 rounded-full mr-3"></div>
<span class="font-medium">Jane Smith</span>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 hidden sm:table-cell">
[email protected]
</td>
<td class="px-4 py-4 whitespace-nowrap hidden md:table-cell">
<span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">Designer</span>
</td>
<td class="px-4 py-4 whitespace-nowrap hidden lg:table-cell">
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
<button class="text-red-600 hover:text-red-900">Delete</button>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-10 h-10 bg-red-500 rounded-full mr-3"></div>
<span class="font-medium">Bob Johnson</span>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 hidden sm:table-cell">
[email protected]
</td>
<td class="px-4 py-4 whitespace-nowrap hidden md:table-cell">
<span class="px-2 py-1 text-xs rounded-full bg-orange-100 text-orange-800">Manager</span>
</td>
<td class="px-4 py-4 whitespace-nowrap hidden lg:table-cell">
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Inactive</span>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
<button class="text-red-600 hover:text-red-900">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Responsive Form Layout -->
<section class="py-16 px-4">
<div class="max-w-2xl mx-auto">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center text-gray-900 mb-12">
Responsive Contact Form
</h2>
<form class="bg-white rounded-lg shadow-md p-6 sm:p-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">
Name
</label>
<input
type="text"
id="name"
name="name"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="John Doe"
/>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">
Email
</label>
<input
type="email"
id="email"
name="email"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="[email protected]"
/>
</div>
</div>
<div class="mt-6">
<label for="subject" class="block text-sm font-medium text-gray-700 mb-2">
Subject
</label>
<input
type="text"
id="subject"
name="subject"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="How can we help?"
/>
</div>
<div class="mt-6">
<label for="message" class="block text-sm font-medium text-gray-700 mb-2">
Message
</label>
<textarea
id="message"
name="message"
rows="4"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Tell us more about your project..."
></textarea>
</div>
<div class="mt-8 flex flex-col sm:flex-row gap-4">
<button
type="submit"
class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-md transition duration-200"
>
Send Message
</button>
<button
type="reset"
class="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 font-semibold py-3 px-6 rounded-md transition duration-200"
>
Reset Form
</button>
</div>
</form>
</div>
</section>
<!-- Breakpoint Indicator -->
<div class="fixed bottom-4 left-4 bg-black text-white p-2 rounded text-xs font-mono z-50">
<span class="block sm:hidden">xs: <640px</span>
<span class="hidden sm:block md:hidden lg:hidden xl:hidden">sm: 640px+</span>
<span class="hidden md:block lg:hidden xl:hidden">md: 768px+</span>
<span class="hidden lg:block xl:hidden">lg: 1024px+</span>
<span class="hidden xl:block 2xl:hidden">xl: 1280px+</span>
<span class="hidden 2xl:block">2xl: 1536px+</span>
</div>
</body>
</html>💻 Tailwind CSS Component Library html
🔴 complex
⭐⭐⭐⭐
Building reusable components with Tailwind CSS, component patterns, and design system
⏱️ 30 min
🏷️ tailwind, components, ui, design system, patterns
Prerequisites:
Advanced Tailwind CSS, JavaScript DOM manipulation, Component architecture understanding
<!-- Tailwind CSS Component Library Examples -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Component Library</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
},
secondary: {
50: '#f8fafc',
500: '#64748b',
600: '#475569',
700: '#334155',
},
success: '#10b981',
warning: '#f59e0b',
danger: '#ef4444',
},
animation: {
'fade-in': 'fadeIn 0.3s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out',
'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
},
},
},
plugins: [
function({ addUtilities }) {
const newUtilities = {
'.scrollbar-hide': {
'-ms-overflow-style': 'none',
'scrollbar-width': 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
},
}
addUtilities(newUtilities)
}
]
}
</script>
</head>
<body class="bg-gray-50">
<!-- Alert Component Variants -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-gray-900 mb-12">Alert Components</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Success Alert -->
<div class="bg-green-50 border border-green-200 rounded-lg p-4 animate-fade-in">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-green-800">Success</h3>
<div class="mt-2 text-sm text-green-700">
Your changes have been saved successfully!
</div>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button class="inline-flex rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Warning Alert -->
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 animate-fade-in">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-yellow-800">Warning</h3>
<div class="mt-2 text-sm text-yellow-700">
Please review your changes before proceeding.
</div>
</div>
<div class="ml-auto pl-3">
<button class="inline-flex rounded-md p-1.5 text-yellow-500 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-600">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
<!-- Error Alert -->
<div class="bg-red-50 border border-red-200 rounded-lg p-4 animate-fade-in">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-red-800">Error</h3>
<div class="mt-2 text-sm text-red-700">
There was an error processing your request. Please try again.
</div>
</div>
<div class="ml-auto pl-3">
<button class="inline-flex rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-600">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
<!-- Info Alert -->
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 animate-fade-in">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-blue-800">Information</h3>
<div class="mt-2 text-sm text-blue-700">
A new version of this application is available. Please update to get the latest features.
</div>
</div>
<div class="ml-auto pl-3">
<button class="inline-flex rounded-md p-1.5 text-blue-500 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-600">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal Components -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-gray-900 mb-12">Modal Components</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Basic Modal Trigger -->
<div class="text-center">
<button onclick="document.getElementById('basicModal').classList.remove('hidden')"
class="bg-primary-600 hover:bg-primary-700 text-white font-bold py-3 px-6 rounded-lg transition duration-200">
Open Basic Modal
</button>
</div>
<!-- Confirmation Modal Trigger -->
<div class="text-center">
<button onclick="document.getElementById('confirmModal').classList.remove('hidden')"
class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg transition duration-200">
Open Confirmation Modal
</button>
</div>
<!-- Form Modal Trigger -->
<div class="text-center">
<button onclick="document.getElementById('formModal').classList.remove('hidden')"
class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg transition duration-200">
Open Form Modal
</button>
</div>
</div>
<!-- Basic Modal -->
<div id="basicModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 animate-fade-in">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-lg bg-white animate-slide-up">
<div class="mt-3 text-center">
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
<svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 class="text-lg font-medium text-gray-900">Success!</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500">
Your changes have been saved successfully.
</p>
</div>
<div class="items-center px-4 py-3">
<button onclick="document.getElementById('basicModal').classList.add('hidden')"
class="px-4 py-2 bg-primary-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
Got it, thanks!
</button>
</div>
</div>
</div>
</div>
<!-- Confirmation Modal -->
<div id="confirmModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 animate-fade-in">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-lg bg-white animate-slide-up">
<div class="mt-3 text-center">
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
<svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<h3 class="text-lg font-medium text-gray-900">Delete Confirmation</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500">
Are you sure you want to delete this item? This action cannot be undone.
</p>
</div>
<div class="flex gap-4 px-4 py-3">
<button onclick="document.getElementById('confirmModal').classList.add('hidden')"
class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md shadow-sm hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500">
Cancel
</button>
<button onclick="document.getElementById('confirmModal').classList.add('hidden')"
class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
Delete
</button>
</div>
</div>
</div>
</div>
<!-- Form Modal -->
<div id="formModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 animate-fade-in">
<div class="relative top-20 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-lg bg-white animate-slide-up">
<div class="mt-3">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Create New User</h3>
<button onclick="document.getElementById('formModal').classList.add('hidden')"
class="text-gray-400 hover:text-gray-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Role</label>
<select class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500">
<option>Admin</option>
<option>User</option>
<option>Guest</option>
</select>
</div>
<div class="flex justify-end gap-4 pt-4">
<button type="button" onclick="document.getElementById('formModal').classList.add('hidden')"
class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
Cancel
</button>
<button type="submit"
class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
Create User
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Dropdown Components -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-gray-900 mb-12">Dropdown Components</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Basic Dropdown -->
<div class="relative">
<button onclick="toggleDropdown('dropdown1')" class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 text-left focus:outline-none focus:ring-2 focus:ring-primary-500">
<span class="block truncate">Options</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</span>
</button>
<div id="dropdown1" class="hidden absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg animate-slide-up">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Help</a>
<hr class="my-1">
<a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Sign Out</a>
</div>
</div>
</div>
<!-- Split Button Dropdown -->
<div class="relative">
<div class="flex">
<button class="flex-1 bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-l-md focus:outline-none focus:ring-2 focus:ring-primary-500">
Save
</button>
<button onclick="toggleDropdown('dropdown2')" class="bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-r-md border-l border-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
<div id="dropdown2" class="hidden absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg animate-slide-up">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Save as Draft</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Save & Publish</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Save Template</a>
</div>
</div>
</div>
<!-- Multi-Select Dropdown -->
<div class="relative">
<button onclick="toggleDropdown('dropdown3')" class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 text-left focus:outline-none focus:ring-2 focus:ring-primary-500">
<span class="block truncate">Select Options</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</span>
</button>
<div id="dropdown3" class="hidden absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg animate-slide-up">
<div class="py-1">
<label class="flex items-center px-4 py-2 hover:bg-gray-100 cursor-pointer">
<input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500">
<span class="text-sm text-gray-700">Option 1</span>
</label>
<label class="flex items-center px-4 py-2 hover:bg-gray-100 cursor-pointer">
<input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500">
<span class="text-sm text-gray-700">Option 2</span>
</label>
<label class="flex items-center px-4 py-2 hover:bg-gray-100 cursor-pointer">
<input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500">
<span class="text-sm text-gray-700">Option 3</span>
</label>
</div>
</div>
</div>
<!-- Search Dropdown -->
<div class="relative">
<input type="text" placeholder="Search..." class="w-full bg-white border border-gray-300 rounded-l-md shadow-sm px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
<button onclick="toggleDropdown('dropdown4')" class="absolute right-0 top-0 bottom-0 bg-gray-50 border border-gray-300 border-l-0 rounded-r-md px-3 py-2 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="dropdown4" class="hidden absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg animate-slide-up">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Recent Searches</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Popular Items</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Categories</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Loading Components -->
<section class="py-16 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-gray-900 mb-12">Loading Components</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Spinner -->
<div class="text-center">
<div class="inline-flex items-center">
<svg class="animate-spin h-8 w-8 text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span class="ml-2 text-gray-600">Loading...</span>
</div>
</div>
<!-- Pulse Loading -->
<div class="text-center">
<div class="inline-block h-8 w-8 bg-gray-300 rounded-full animate-pulse"></div>
<p class="mt-2 text-gray-600">Processing...</p>
</div>
<!-- Skeleton Loader -->
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="animate-pulse">
<div class="h-4 bg-gray-300 rounded w-3/4 mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-1/2 mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-5/6 mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full"></div>
</div>
</div>
<!-- Progress Bar -->
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-700">Upload Progress</span>
<span class="text-sm text-gray-500">65%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-primary-600 h-2 rounded-full" style="width: 65%"></div>
</div>
</div>
<!-- Loading Dots -->
<div class="text-center">
<div class="flex space-x-2 justify-center">
<div class="w-2 h-2 bg-gray-600 rounded-full animate-bounce"></div>
<div class="w-2 h-2 bg-gray-600 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
<div class="w-2 h-2 bg-gray-600 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
</div>
<p class="mt-2 text-gray-600">Loading...</p>
</div>
<!-- Loading Card -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="animate-pulse">
<div class="h-48 bg-gray-300"></div>
<div class="p-6">
<div class="h-4 bg-gray-300 rounded w-3/4 mb-2"></div>
<div class="h-3 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-3 bg-gray-300 rounded w-full"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8 mt-16">
<div class="max-w-7xl mx-auto px-4 text-center">
<p class="text-sm">© 2024 Tailwind CSS Component Library. Built with utility-first CSS.</p>
</div>
</footer>
<script>
function toggleDropdown(id) {
const dropdown = document.getElementById(id);
dropdown.classList.toggle('hidden');
// Close other dropdowns
document.querySelectorAll('[id^="dropdown"]:not([id="' + id + '"])').forEach(el => {
el.classList.add('hidden');
});
}
// Close dropdowns when clicking outside
document.addEventListener('click', function(event) {
if (!event.target.closest('.relative')) {
document.querySelectorAll('[id^="dropdown"]').forEach(el => {
el.classList.add('hidden');
});
}
});
</script>
</body>
</html>💻 Tailwind CSS Advanced Techniques javascript
🔴 complex
⭐⭐⭐⭐⭐
Custom configurations, JIT mode, design tokens, plugins, and performance optimization
⏱️ 40 min
🏷️ tailwind, css, configuration, optimization, advanced
Prerequisites:
Advanced Tailwind CSS, JavaScript ES6+, Build tools knowledge, CSS expertise
// tailwind.config.js - Advanced Configuration
module.exports = {
// JIT (Just-In-Time) mode for production
mode: 'jit',
// PurgeCSS content paths
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
"./public/**/*.html",
"./index.html"
],
// Dark mode configuration
darkMode: 'class', // or 'media'
// Custom theme configuration
theme: {
// Custom colors
colors: {
// Brand colors
primary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
},
secondary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
},
// Semantic colors
success: {
50: '#ecfdf5',
500: '#10b981',
600: '#059669',
},
warning: {
50: '#fffbeb',
500: '#f59e0b',
600: '#d97706',
},
error: {
50: '#fef2f2',
500: '#ef4444',
600: '#dc2626',
},
// Custom gradients
gradient: {
1: '#667eea',
2: '#764ba2',
3: '#f093fb',
},
},
// Custom font family
fontFamily: {
'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'sans-serif'],
'serif': ['Merriweather', 'Georgia', 'serif'],
'mono': ['JetBrains Mono', 'Fira Code', 'Monaco', 'monospace'],
},
// Custom font sizes
fontSize: {
'2xs': ['10px', { lineHeight: '14px' }],
'3xl': ['32px', { lineHeight: '40px' }],
'4xl': ['48px', { lineHeight: '56px' }],
'5xl': ['64px', { lineHeight: '72px' }],
'6xl': ['80px', { lineHeight: '88px' }],
},
// Extended spacing scale
spacing: {
'128': '32rem',
'144': '36rem',
'160': '40rem',
'176': '44rem',
'192': '48rem',
'208': '52rem',
'224': '56rem',
},
// Custom breakpoints
screens: {
'xs': '475px',
'3xl': '1600px',
'4xl': '1920px',
},
// Custom border radius
borderRadius: {
'4xl': '2rem',
'5xl': '2.5rem',
},
// Custom animations
animation: {
'fade-in': 'fadeIn 0.3s ease-in-out',
'fade-out': 'fadeOut 0.3s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out',
'slide-down': 'slideDown 0.3s ease-in',
'slide-left': 'slideLeft 0.3s ease-out',
'slide-right': 'slideRight 0.3s ease-in',
'scale-up': 'scaleUp 0.2s ease-in-out',
'scale-down': 'scaleDown 0.2s ease-in-out',
'bounce-in': 'bounceIn 0.5s',
'rotate-slow': 'rotate 2s linear infinite',
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'shimmer': 'shimmer 1.5s ease-in-out infinite',
'float': 'float 3s ease-in-out infinite',
},
// Custom keyframes
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
fadeOut: {
'0%': { opacity: '1' },
'100%': { opacity: '0' },
},
slideUp: {
'0%': { transform: 'translateY(10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
slideDown: {
'0%': { transform: 'translateY(-10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
slideLeft: {
'0%': { transform: 'translateX(10px)', opacity: '0' },
'100%': { transform: 'translateX(0)', opacity: '1' },
},
slideRight: {
'0%': { transform: 'translateX(-10px)', opacity: '0' },
'100%': { transform: 'translateX(0)', opacity: '1' },
},
scaleUp: {
'0%': { transform: 'scale(0.95)', opacity: '0' },
'100%': { transform: 'scale(1)', opacity: '1' },
},
scaleDown: {
'0%': { transform: 'scale(1.05)', opacity: '0' },
'100%': { transform: 'scale(1)', opacity: '1' },
},
bounceIn: {
'0%': { transform: 'scale(0.3)', opacity: '0' },
'50%': { transform: 'scale(1.05)' },
'70%': { transform: 'scale(0.9)' },
'100%': { transform: 'scale(1)', opacity: '1' },
},
shimmer: {
'0%': { backgroundPosition: '-1000px 0' },
'100%': { backgroundPosition: '1000px 0' },
},
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-10px)' },
},
},
// Extended box shadow
boxShadow: {
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
'medium': '0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'large': '0 10px 50px -12px rgba(0, 0, 0, 0.25)',
'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
},
// Custom gradient backgrounds
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
'shimmer-gradient': 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
},
},
// Plugins
plugins: [
// Forms plugin
require('@tailwindcss/forms'),
// Typography plugin
require('@tailwindcss/typography'),
// Aspect ratio plugin
require('@tailwindcss/aspect-ratio'),
// Container queries
require('@tailwindcss/container-queries'),
// Custom plugin for component classes
function({ addUtilities, theme }) {
const newUtilities = {
// Component utilities
'.btn': {
'@apply font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200': {},
},
'.btn-primary': {
'@apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500': {},
},
'.btn-secondary': {
'@apply bg-secondary-600 text-white hover:bg-secondary-700 focus:ring-secondary-500': {},
},
'.btn-ghost': {
'@apply bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-primary-500': {},
},
// Card utilities
'.card': {
'@apply bg-white rounded-lg shadow-md overflow-hidden': {},
},
'.card-header': {
'@apply px-6 py-4 border-b border-gray-200': {},
},
'.card-body': {
'@apply px-6 py-4': {},
},
'.card-footer': {
'@apply px-6 py-4 bg-gray-50 border-t border-gray-200': {},
},
// Input utilities
'.input': {
'@apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500': {},
},
'.input-error': {
'@apply border-red-500 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500': {},
},
// Navigation utilities
'.nav-link': {
'@apply px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:text-gray-900 focus:bg-gray-200': {},
},
'.nav-link-active': {
'@apply bg-primary-100 text-primary-700': {},
},
// Scrollbar utilities
'.scrollbar-hide': {
'-ms-overflow-style': 'none',
'scrollbar-width': 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
},
'.scrollbar-thin': {
'scrollbar-width': 'thin',
'&::-webkit-scrollbar': {
width: '6px',
},
'&::-webkit-scrollbar-track': {
background: '#f1f1f1',
},
'&::-webkit-scrollbar-thumb': {
background: '#c1c1c1',
borderRadius: '3px',
},
'&::-webkit-scrollbar-thumb:hover': {
background: '#a8a8a8',
},
},
// Glassmorphism utilities
'.glass': {
'@apply bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-20': {},
},
'.glass-dark': {
'@apply bg-black bg-opacity-20 backdrop-blur-lg border border-white border-opacity-20': {},
},
// Text gradient utilities
'.text-gradient': {
'background-clip': 'text',
'-webkit-background-clip': 'text',
'-webkit-text-fill-color': 'transparent',
},
'.text-gradient-primary': {
'@apply bg-gradient-to-r from-primary-600 to-primary-400 text-gradient': {},
},
'.text-gradient-secondary': {
'@apply bg-gradient-to-r from-secondary-600 to-secondary-400 text-gradient': {},
},
// Responsive text utilities
'.responsive-text': {
'@apply text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl': {},
},
// Hover utilities
'.hover-lift': {
'@apply transition-transform duration-200 hover:scale-105': {},
},
'.hover-glow': {
'@apply transition-shadow duration-200 hover:shadow-xl': {},
},
};
addUtilities(newUtilities);
},
// Additional plugin for dynamic utilities
function({ addVariant }) {
addVariant('hover-dark', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.dark:hover ${className}`;
});
});
addVariant('group-hover', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.group:hover ${className}`;
});
});
},
],
// Prefix for all utilities
prefix: 'tw-',
// Important setting
important: true,
};
// postcss.config.js - Advanced PostCSS setup
module.exports = {
plugins: [
// Tailwind CSS
'tailwindcss',
// Autoprefixer
'autoprefixer',
// PostCSS Nested
'postcss-nested',
// PostCSS Custom Properties (for CSS variables)
'postcss-custom-properties',
// CSS Modules
'postcss-modules',
// PostCSS Mixins
'postcss-mixins',
// CSS Nano for production minification
...(process.env.NODE_ENV === 'production' ? ['cssnano'] : []),
],
};
// Custom CSS variables for design tokens
:root {
/* Color tokens */
--color-primary: 59 130 246;
--color-secondary: 100 116 139;
--color-success: 16 185 129;
--color-warning: 245 158 11;
--color-error: 239 68 68;
/* Spacing tokens */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
/* Typography tokens */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
/* Shadow tokens */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
/* Border radius tokens */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
/* Z-index tokens */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
--z-toast: 1080;
}
/* Dark mode CSS variables */
.dark {
--color-primary: 147 197 253;
--color-secondary: 203 213 225;
--color-success: 52 211 153;
--color-warning: 251 191 36;
--color-error: 248 113 113;
}
/* Custom utility classes using CSS variables */
.text-primary-custom {
color: rgb(var(--color-primary));
}
.bg-primary-custom {
background-color: rgb(var(--color-primary));
}
.border-primary-custom {
border-color: rgb(var(--color-primary));
}
/* Performance optimization utilities */
.will-change-transform {
will-change: transform;
}
.will-change-opacity {
will-change: opacity;
}
.gpu-accelerated {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
/* Print styles */
@media print {
.no-print {
display: none !important;
}
.print-only {
display: block !important;
}
/* Ensure colors are readable in print */
* {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.high-contrast-hidden {
display: none;
}
.high-contrast-border {
border-width: 2px !important;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Container queries support */
@container (min-width: 768px) {
.container-sm {
/* Container-specific styles */
}
}
@container (min-width: 1024px) {
.container-md {
/* Container-specific styles */
}
}
/* Custom component classes with extensive state management */
.component-base {
@apply relative w-full transition-all duration-200;
}
.component-base:hover {
@apply transform -translate-y-1;
}
.component-base.active {
@apply ring-2 ring-primary-500 ring-offset-2;
}
.component-base.disabled {
@apply opacity-50 cursor-not-allowed pointer-events-none;
}
/* Advanced gradient backgrounds */
.gradient-mesh {
background-image:
linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
background-size: 50px 50px;
background-position: 0 0, 50px 50px;
}
.gradient-animated {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient-shift 15s ease infinite;
}
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Modern CSS features support */
@supports (backdrop-filter: blur()) {
.backdrop-blur-support {
backdrop-filter: blur(10px);
}
}
@supports (display: grid) {
.grid-support {
display: grid;
gap: 1rem;
}
}
/* Typography system with fluid scaling */
.fluid-text {
font-size: clamp(1rem, 2.5vw, 2rem);
line-height: 1.5;
}
/* Performance critical CSS inlining optimization */
.critical-above-fold {
/* Critical CSS for above-the-fold content */
}
/* Custom scrollbar styling for webkit browsers */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(to bottom, #2563eb, #1e40af);
}
/* Focus visible support for accessibility */
.focus-visible:focus:not(:focus-visible) {
outline: none;
}
.focus-visible:focus-visible {
@apply ring-2 ring-primary-500 ring-offset-2;
}
/* Data attribute utilities for component variants */
[data-state="loading"] {
@apply opacity-75 pointer-events-none;
}
[data-state="error"] {
@apply border-red-500 text-red-600 bg-red-50;
}
[data-state="success"] {
@apply border-green-500 text-green-600 bg-green-50;
}
/* Custom property utilities for dynamic theming */
.theme-transition {
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
</script>
<!-- HTML example using advanced Tailwind configurations -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Advanced Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom animations and keyframes */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
/* Custom glassmorphism */
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Text gradient */
.text-gradient {
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen custom-scrollbar">
<!-- Advanced Header with Glassmorphism -->
<header class="glass fixed top-0 left-0 right-0 z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<h1 class="text-gradient text-2xl font-bold">
Advanced Tailwind
</h1>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-white hover:text-gray-200 transition-colors">Features</a>
<a href="#" class="text-white hover:text-gray-200 transition-colors">Components</a>
<a href="#" class="text-white hover:text-gray-200 transition-colors">Performance</a>
<a href="#" class="text-white hover:text-gray-200 transition-colors">Advanced</a>
</nav>
<button id="theme-toggle" class="text-white hover:text-gray-200 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 001-12.292 0c-3.183 0-6.035 1.417-8.944-3.65L3 15.354m13.646-12.292A9.003 9.003 0 0012.292 0c3.183 0 6.035-1.417 8.944-3.65L21 12.646" />
</svg>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-6 py-20">
<!-- Hero Section with Advanced Animations -->
<section class="text-center mb-20">
<div class="inline-block">
<div class="bg-gradient-to-r from-primary-500 to-purple-600 text-white text-sm font-semibold px-4 py-2 rounded-full float-animation">
Advanced Styling
</div>
</div>
<h2 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6 mt-6">
<span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Next-Level CSS
</span>
</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Experience the power of Tailwind CSS with advanced configurations, custom utilities, and performance optimizations.
</p>
<div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
<button class="btn btn-primary text-lg px-8 py-3">
Get Started
</button>
<button class="btn btn-secondary text-lg px-8 py-3">
View Documentation
</button>
</div>
</section>
<!-- Advanced Component Showcase -->
<section class="mb-20">
<h3 class="text-3xl font-bold text-center text-gray-900 mb-12">Advanced Components</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Neumorphic Card -->
<div class="bg-gray-100 p-8 rounded-2xl shadow-inner">
<div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-purple-600 rounded-2xl mx-auto mb-4 shadow-lg"></div>
<h4 class="text-lg font-semibold text-center mb-2">Neumorphic Design</h4>
<p class="text-gray-600 text-center">Modern soft UI with inner shadows</p>
</div>
<!-- Morphing Button -->
<div class="p-8">
<button class="group relative px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl font-semibold overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-xl">
<span className="relative z-10">Morphing Button</span>
<div class="absolute inset-0 bg-gradient-to-r from-pink-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div>
<!-- Animated Badge -->
<div class="p-8 text-center">
<div class="inline-flex items-center">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
<span class="ml-2 text-gray-700">Live Notification</span>
</div>
</div>
</div>
</section>
<!-- Performance Metrics -->
<section class="mb-20">
<h3 class="text-3xl font-bold text-center text-gray-900 mb-12">Performance Metrics</h3>
<div class="bg-white rounded-2xl shadow-xl p-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
<div class="p-6">
<div class="text-4xl font-bold text-green-600">99.8</div>
<div class="text-gray-600">Lighthouse Score</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-blue-600">1.2s</div>
<div class="text-gray-600">First Contentful Paint</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-purple-600">47KB</div>
<div class="text-gray-600">CSS Bundle Size</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-6 text-center">
<p class="text-sm">
Built with Tailwind CSS • Advanced Configuration • JIT Mode
</p>
</div>
</footer>
<script>
// Theme toggle functionality
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;
themeToggle.addEventListener('click', () => {
if (html.classList.contains('dark')) {
html.classList.remove('dark');
localStorage.theme = 'light';
} else {
html.classList.add('dark');
localStorage.theme = 'dark';
}
});
// Check for saved theme preference
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
html.classList.add('dark');
}
// Add smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Performance monitoring (development only)
if (window.performance && process.env.NODE_ENV === 'development') {
window.addEventListener('load', () => {
const navigation = performance.getEntriesByType('navigation')[0];
console.log('Page Load Time:', navigation.loadEventEnd - navigation.fetchStart, 'ms');
});
}
</script>
</body>
</html>