Tailwind Components Skill
Common component patterns built with Tailwind CSS.
Buttons
Button Variants
<!-- Primary button -->
<button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg
hover:bg-blue-700 focus:outline-none focus:ring-2
focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Primary
</button>
<!-- Secondary button -->
<button class="px-4 py-2 bg-gray-200 text-gray-800 font-medium rounded-lg
hover:bg-gray-300 focus:outline-none focus:ring-2
focus:ring-gray-500 focus:ring-offset-2 transition-colors">
Secondary
</button>
<!-- Outline button -->
<button class="px-4 py-2 border-2 border-blue-600 text-blue-600 font-medium
rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2
focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Outline
</button>
<!-- Ghost button -->
<button class="px-4 py-2 text-blue-600 font-medium rounded-lg
hover:bg-blue-50 focus:outline-none focus:ring-2
focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Ghost
</button>
<!-- Destructive button -->
<button class="px-4 py-2 bg-red-600 text-white font-medium rounded-lg
hover:bg-red-700 focus:outline-none focus:ring-2
focus:ring-red-500 focus:ring-offset-2 transition-colors">
Delete
</button>
Button Sizes
<!-- Small -->
<button class="px-3 py-1.5 text-sm">Small</button>
<!-- Medium (default) -->
<button class="px-4 py-2 text-base">Medium</button>
<!-- Large -->
<button class="px-6 py-3 text-lg">Large</button>
Button with Icon
<button class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600
text-white rounded-lg hover:bg-blue-700">
<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-lg font-semibold text-gray-900">Card Title</h3>
<p class="mt-2 text-gray-600">Card description text goes here.</p>
</div>
Card with Image
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="image.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
<p class="mt-2 text-gray-600">Card description.</p>
<button class="mt-4 text-blue-600 hover:text-blue-700 font-medium">
Learn more →
</button>
</div>
</div>
Interactive Card
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg
transition-shadow cursor-pointer border border-gray-200
hover:border-blue-500">
<h3 class="text-lg font-semibold text-gray-900">Interactive Card</h3>
<p class="mt-2 text-gray-600">Click me!</p>
</div>
Forms
Input Field
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Email
</label>
<input type="email"
class="w-full px-3 py-2 border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500
focus:border-blue-500 placeholder-gray-400"
placeholder="you@example.com" />
</div>
Input with Error
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Email
</label>
<input type="email"
class="w-full px-3 py-2 border border-red-500 rounded-lg
focus:outline-none focus:ring-2 focus:ring-red-500
focus:border-red-500 bg-red-50"
value="invalid-email" />
<p class="mt-1 text-sm text-red-600">Please enter a valid email address.</p>
</div>
Select
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
Country
</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500
focus:border-blue-500 bg-white">
<option>United States</option>
<option>Canada</option>
<option>Mexico</option>
</select>
</div>
Checkbox
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox"
class="w-4 h-4 text-blue-600 border-gray-300 rounded
focus:ring-blue-500 focus:ring-2" />
<span class="text-sm text-gray-700">Accept terms and conditions</span>
</label>
Radio Group
<div class="space-y-2">
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="plan" value="free"
class="w-4 h-4 text-blue-600 border-gray-300
focus:ring-blue-500 focus:ring-2" />
<span class="text-sm text-gray-700">Free</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="plan" value="pro"
class="w-4 h-4 text-blue-600 border-gray-300
focus:ring-blue-500 focus:ring-2" />
<span class="text-sm text-gray-700">Pro</span>
</label>
</div>
Navigation
Navbar
<nav class="bg-white border-b border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center gap-8">
<a href="/" class="text-xl font-bold text-gray-900">Logo</a>
<div class="hidden md:flex gap-6">
<a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Products</a>
<a href="#" class="text-gray-600 hover:text-gray-900">About</a>
</div>
</div>
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg">
Sign Up
</button>
</div>
</div>
</nav>
Sidebar
<aside class="w-64 bg-gray-900 text-white min-h-screen">
<div class="p-4">
<h2 class="text-xl font-bold">Dashboard</h2>
</div>
<nav class="mt-4">
<a href="#" class="flex items-center gap-3 px-4 py-3 bg-gray-800
text-white hover:bg-gray-700">
<svg class="w-5 h-5">...</svg>
Overview
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3
text-gray-300 hover:bg-gray-800 hover:text-white">
<svg class="w-5 h-5">...</svg>
Analytics
</a>
</nav>
</aside>
Modals
Basic Modal
<!-- Overlay -->
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<!-- Modal -->
<div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
<!-- Header -->
<div class="flex items-center justify-between p-4 border-b">
<h3 class="text-lg font-semibold text-gray-900">Modal Title</h3>
<button class="text-gray-400 hover:text-gray-600">
<svg class="w-6 h-6">...</svg>
</button>
</div>
<!-- Body -->
<div class="p-4">
<p class="text-gray-600">Modal content goes here.</p>
</div>
<!-- Footer -->
<div class="flex justify-end gap-3 p-4 border-t">
<button class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">
Cancel
</button>
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg">
Confirm
</button>
</div>
</div>
</div>
Alerts
Alert Variants
<!-- Info -->
<div class="p-4 bg-blue-50 border border-blue-200 rounded-lg">
<div class="flex items-start gap-3">
<svg class="w-5 h-5 text-blue-500 mt-0.5">...</svg>
<div>
<h4 class="font-medium text-blue-800">Information</h4>
<p class="text-sm text-blue-700 mt-1">This is an info message.</p>
</div>
</div>
</div>
<!-- Success -->
<div class="p-4 bg-green-50 border border-green-200 rounded-lg">
<div class="flex items-start gap-3">
<svg class="w-5 h-5 text-green-500 mt-0.5">...</svg>
<div>
<h4 class="font-medium text-green-800">Success</h4>
<p class="text-sm text-green-700 mt-1">Operation completed.</p>
</div>
</div>
</div>
<!-- Warning -->
<div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
<div class="flex items-start gap-3">
<svg class="w-5 h-5 text-yellow-500 mt-0.5">...</svg>
<div>
<h4 class="font-medium text-yellow-800">Warning</h4>
<p class="text-sm text-yellow-700 mt-1">Please review this.</p>
</div>
</div>
</div>
<!-- Error -->
<div class="p-4 bg-red-50 border border-red-200 rounded-lg">
<div class="flex items-start gap-3">
<svg class="w-5 h-5 text-red-500 mt-0.5">...</svg>
<div>
<h4 class="font-medium text-red-800">Error</h4>
<p class="text-sm text-red-700 mt-1">Something went wrong.</p>
</div>
</div>
</div>
Badges
<!-- Solid badges -->
<span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded">
New
</span>
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">
Active
</span>
<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">
Urgent
</span>
<!-- Pill badges -->
<span class="px-3 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">
Label
</span>
Integration
Used by:
frontend-developeragentfullstack-developeragent
Converted and distributed by TomeVault — claim your Tome and manage your conversions.