06 - Common Components
Buttons
<!-- Primary button -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-medium px-6 py-2 rounded-lg transition">
Primary Button
</button>
<!-- Secondary button -->
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium px-6 py-2 rounded-lg transition">
Secondary Button
</button>
<!-- Outline button -->
<button class="border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-medium px-6 py-2 rounded-lg transition">
Outline Button
</button>
<!-- Danger button -->
<button class="bg-red-500 hover:bg-red-600 text-white font-medium px-6 py-2 rounded-lg transition">
Delete
</button>
<!-- Disabled button -->
<button class="bg-gray-300 text-gray-500 px-6 py-2 rounded-lg cursor-not-allowed" disabled>
Disabled
</button>
<!-- Button sizes -->
<button class="bg-blue-500 text-white px-3 py-1 rounded text-sm">Small</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded">Medium</button>
<button class="bg-blue-500 text-white px-6 py-3 rounded text-lg">Large</button>
<!-- Full width button -->
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 rounded-lg">
Full Width
</button>
<!-- Button with icon -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-medium px-6 py-2 rounded-lg flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
Add Item
</button>
Cards
<!-- Basic card -->
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-xl font-bold mb-2">Card Title</h3>
<p class="text-gray-600">Card content goes here.</p>
</div>
<!-- Card with image -->
<div class="bg-white rounded-lg shadow-md overflow-hidden max-w-sm">
<img src="image.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Card Title</h3>
<p class="text-gray-600 mb-4">Card description here.</p>
<button class="text-blue-500 hover:text-blue-600 font-medium">
Read more →
</button>
</div>
</div>
<!-- Hover card -->
<div class="bg-white rounded-lg shadow-md hover:shadow-xl transition p-6 cursor-pointer">
<h3 class="text-xl font-bold mb-2">Interactive Card</h3>
<p class="text-gray-600">Hover for effect.</p>
</div>
<!-- Pricing card -->
<div class="bg-white rounded-lg shadow-lg p-8 border-t-4 border-blue-500">
<h3 class="text-2xl font-bold text-center mb-4">Basic Plan</h3>
<div class="text-center mb-6">
<span class="text-4xl font-bold">$19</span>
<span class="text-gray-600">/month</span>
</div>
<ul class="space-y-2 mb-6">
<li class="text-gray-700">✓ Feature 1</li>
<li class="text-gray-700">✓ Feature 2</li>
<li class="text-gray-700">✓ Feature 3</li>
</ul>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 rounded-lg">
Choose Plan
</button>
</div>
Forms
<!-- Input field -->
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2" for="email">
Email Address
</label>
<input
type="email"
id="email"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="you@example.com"
/>
</div>
<!-- Textarea -->
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2" for="message">
Message
</label>
<textarea
id="message"
rows="4"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Your message..."
></textarea>
</div>
<!-- Select dropdown -->
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2" for="country">
Country
</label>
<select
id="country"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option>United States</option>
<option>Canada</option>
<option>United Kingdom</option>
</select>
</div>
<!-- Checkbox -->
<div class="flex items-center mb-4">
<input
type="checkbox"
id="terms"
class="w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-2 focus:ring-blue-500"
/>
<label for="terms" class="ml-2 text-gray-700">
I agree to the terms and conditions
</label>
</div>
<!-- Radio buttons -->
<div class="mb-4">
<p class="text-gray-700 font-medium mb-2">Choose a plan:</p>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="plan" class="w-4 h-4 text-blue-500" checked />
<span class="ml-2">Basic ($10/mo)</span>
</label>
<label class="flex items-center">
<input type="radio" name="plan" class="w-4 h-4 text-blue-500" />
<span class="ml-2">Pro ($20/mo)</span>
</label>
<label class="flex items-center">
<input type="radio" name="plan" class="w-4 h-4 text-blue-500" />
<span class="ml-2">Enterprise ($50/mo)</span>
</label>
</div>
</div>
<!-- Complete form -->
<form class="bg-white p-6 rounded-lg shadow-md max-w-md">
<h2 class="text-2xl font-bold mb-6">Contact Us</h2>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2">Name</label>
<input
type="text"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="John Doe"
/>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2">Email</label>
<input
type="email"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="john@example.com"
/>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Message</label>
<textarea
rows="4"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Your message..."
></textarea>
</div>
<button
type="submit"
class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 rounded-lg transition"
>
Send Message
</button>
</form>
Alerts and Notifications
<!-- Success alert -->
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
<p class="font-bold">Success!</p>
<p>Your action was completed successfully.</p>
</div>
<!-- Error alert -->
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
<p class="font-bold">Error!</p>
<p>Something went wrong. Please try again.</p>
</div>
<!-- Warning alert -->
<div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4" role="alert">
<p class="font-bold">Warning!</p>
<p>Please review your information before proceeding.</p>
</div>
<!-- Alert with dismiss button -->
<div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative mb-4" role="alert">
<strong class="font-bold">Info: </strong>
<span class="block sm:inline">Here's some helpful information.</span>
<span class="absolute top-0 bottom-0 right-0 px-4 py-3">
<svg class="fill-current h-6 w-6 text-blue-500" role="button" viewBox="0 0 20 20">
<path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/>
</svg>
</span>
</div>
<!-- Toast notification -->
<div class="fixed bottom-4 right-4 bg-white shadow-lg rounded-lg p-4 border-l-4 border-green-500 max-w-sm">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<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">
<p class="text-sm font-medium text-gray-900">Successfully saved!</p>
<p class="mt-1 text-sm text-gray-500">Your changes have been saved.</p>
</div>
</div>
</div>
Modals
<!-- Modal backdrop -->
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4">
<!-- Modal -->
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
<!-- Header -->
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold">Modal Title</h3>
<button class="text-gray-400 hover:text-gray-600">
<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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Body -->
<div class="mb-6">
<p class="text-gray-700">Modal content goes here. You can add any content you want.</p>
</div>
<!-- Footer -->
<div class="flex justify-end gap-2">
<button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg">
Cancel
</button>
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
Confirm
</button>
</div>
</div>
</div>
Navigation
<!-- Navbar -->
<nav class="bg-white shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<!-- Logo -->
<div class="flex items-center">
<span class="text-2xl font-bold text-blue-600">Logo</span>
</div>
<!-- Links -->
<div class="flex items-center space-x-8">
<a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Home</a>
<a href="#" class="text-gray-700 hover:text-blue-600 font-medium">About</a>
<a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Services</a>
<a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Contact</a>
</div>
<!-- CTA Button -->
<div class="flex items-center">
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
Get Started
</button>
</div>
</div>
</div>
</nav>
<!-- Sidebar -->
<aside class="w-64 bg-gray-800 text-white h-screen p-6">
<div class="mb-8">
<h2 class="text-2xl font-bold">Dashboard</h2>
</div>
<nav class="space-y-2">
<a href="#" class="flex items-center px-4 py-2 bg-gray-700 rounded-lg">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
</svg>
Home
</a>
<a href="#" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
</svg>
Reports
</a>
<a href="#" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
<svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
Settings
</a>
</nav>
</aside>
<!-- Breadcrumbs -->
<nav class="flex mb-4" aria-label="Breadcrumb">
<ol class="flex items-center space-x-2 text-sm text-gray-600">
<li><a href="#" class="hover:text-blue-600">Home</a></li>
<li><span class="mx-2">/</span></li>
<li><a href="#" class="hover:text-blue-600">Products</a></li>
<li><span class="mx-2">/</span></li>
<li class="text-gray-900 font-medium">Laptop</li>
</ol>
</nav>
Key Takeaways
- Reuse component patterns across your project
- Combine utilities to create custom designs
- Use hover and focus states for interactivity
- Keep components modular and maintainable
- Responsive components adapt to all screen sizes
- Use transitions for smooth interactions
- Focus states improve accessibility