Master building reusable, production-ready components with Tailwind CSS. Learn patterns for cards, modals, navigation, forms, and complex UI components using utility-first approach.
classes, you compose utilities to create unique components.
Extraction when Needed: When patterns repeat, you extract them into reusable components in your framework (React, Vue, etc.) or use @apply sparingly.
Flexibility First: Components should accept variants and be easy to customize.
Let's explore the essential component patterns every Tailwind developer should master.
Cards are one of the most common UI patterns. Let's build flexible, reusable card components.
Simple Card:
1<div class="bg-white rounded-lg shadow-md overflow-hidden">
2 <div class="p-6">
3 <h3 class="text-xl font-bold text-gray-900 mb-2">Card Title</h3>
4 <p class="text-gray-600">
5 Card content goes here. This is a basic card pattern.
6 </p>
7 </div>
8</div>Card with Image:
1<div class="bg-white rounded-lg shadow-md overflow-hidden">
2 <!-- Image -->
3 <img
4 src="image.jpg"
5 alt="Card image"
6 class="w-full h-48 object-cover"
7 />
8
9 <!-- Content -->
10 <div class="p-6">
11 <h3 class="text-xl font-bold text-gray-900 mb-2">Card with Image</h3>
12 <p class="text-gray-600 mb-4">
13 Beautiful card with image header.
14 </p>
15 <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded">
16 Read More
17 </button>
18 </div>
19</div>Horizontal Card:
1<div class="bg-white rounded-lg shadow-md overflow-hidden flex">
2 <!-- Image -->
3 <img
4 src="image.jpg"
5 alt="Card image"
6 class="w-48 h-full object-cover"
7 />
8
9 <!-- Content -->
10 <div class="p-6 flex-1">
11 <h3 class="text-xl font-bold text-gray-900 mb-2">Horizontal Card</h3>
12 <p class="text-gray-600">
13 Content displayed beside the image.
14 </p>
15 </div>
16</div>Card with Header and Footer:
1<div class="bg-white rounded-lg shadow-md overflow-hidden">
2 <!-- Header -->
3 <div class="bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-4">
4 <h3 class="text-xl font-bold text-white">Card Header</h3>
5 </div>
6
7 <!-- Body -->
8 <div class="p-6">
9 <p class="text-gray-600">
10 Main card content with header and footer sections.
11 </p>
12 </div>
13
14 <!-- Footer -->
15 <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
16 <div class="flex justify-between items-center">
17 <span class="text-sm text-gray-500">2 hours ago</span>
18 <button class="text-blue-600 hover:text-blue-700 font-semibold text-sm">
19 View Details
20 </button>
21 </div>
22 </div>
23</div>Interactive Card (Hover Effect):
1<div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer">
2 <img
3 src="image.jpg"
4 alt="Card image"
5 class="w-full h-48 object-cover"
6 />
7 <div class="p-6">
8 <h3 class="text-xl font-bold text-gray-900 mb-2">Interactive Card</h3>
9 <p class="text-gray-600">
10 Hover to see the elevation effect.
11 </p>
12 </div>
13</div>Consistency:
Responsiveness:
1<!-- Stack on mobile, grid on larger screens -->
2<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
3 <div class="bg-white rounded-lg shadow-md p-6">Card 1</div>
4 <div class="bg-white rounded-lg shadow-md p-6">Card 2</div>
5 <div class="bg-white rounded-lg shadow-md p-6">Card 3</div>
6</div>Accessibility:
1<!-- Add semantic markup and ARIA when needed -->
2<article
3 class="bg-white rounded-lg shadow-md p-6"
4 role="article"
5 aria-labelledby="card-title"
6>
7 <h3 id="card-title" class="text-xl font-bold mb-2">Card Title</h3>
8 <p>Content...</p>
9</article>Modals are essential for focused interactions. Building accessible, responsive modals requires careful attention to markup and styling.
1<!-- Overlay/Backdrop -->
2<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
3
4 <!-- Modal Container -->
5 <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
6
7 <!-- Modal Header -->
8 <div class="flex items-center justify-between p-6 border-b border-gray-200">
9 <h3 class="text-xl font-bold text-gray-900">Modal Title</h3>
10 <button
11 type="button"
12 class="text-gray-400 hover:text-gray-600 transition-colors"
13 aria-label="Close modal"
14 >
15 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
16 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
17 </svg>
18 </button>
19 </div>
20
21 <!-- Modal Body -->
22 <div class="p-6">
23 <p class="text-gray-600">
24 Modal content goes here. You can add forms, text, images, or any other content.
25 </p>
26 </div>
27
28 <!-- Modal Footer -->
29 <div class="flex justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50">
30 <button
31 type="button"
32 class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
33 >
34 Cancel
35 </button>
36 <button
37 type="button"
38 class="px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-colors"
39 >
40 Confirm
41 </button>
42 </div>
43
44 </div>
45</div>1<!-- Small Modal -->
2<div class="bg-white rounded-lg shadow-xl max-w-sm w-full">...</div>
3
4<!-- Medium Modal (default) -->
5<div class="bg-white rounded-lg shadow-xl max-w-md w-full">...</div>
6
7<!-- Large Modal -->
8<div class="bg-white rounded-lg shadow-xl max-w-2xl w-full">...</div>
9
10<!-- Extra Large Modal -->
11<div class="bg-white rounded-lg shadow-xl max-w-4xl w-full">...</div>
12
13<!-- Full Width (with margin) -->
14<div class="bg-white rounded-lg shadow-xl max-w-7xl w-full">...</div>For long content:
1<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
2 <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col">
3
4 <!-- Fixed Header -->
5 <div class="flex items-center justify-between p-6 border-b border-gray-200">
6 <h3 class="text-xl font-bold">Scrollable Modal</h3>
7 <button class="text-gray-400 hover:text-gray-600">×</button>
8 </div>
9
10 <!-- Scrollable Body -->
11 <div class="p-6 overflow-y-auto flex-1">
12 <!-- Long content here -->
13 <p class="mb-4">Content paragraph 1...</p>
14 <p class="mb-4">Content paragraph 2...</p>
15 <!-- ... more content ... -->
16 </div>
17
18 <!-- Fixed Footer -->
19 <div class="flex justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50">
20 <button class="px-4 py-2 bg-white border border-gray-300 rounded-md">Cancel</button>
21 <button class="px-4 py-2 bg-blue-600 text-white rounded-md">Save</button>
22 </div>
23
24 </div>
25</div>Bottom Sheet (Mobile-Friendly):
1<div class="fixed inset-0 bg-black bg-opacity-50 flex items-end sm:items-center justify-center z-50">
2 <div class="bg-white rounded-t-2xl sm:rounded-lg shadow-xl w-full sm:max-w-md sm:w-full">
3 <!-- Mobile: slides up from bottom, Desktop: centered modal -->
4 <div class="p-6">
5 <h3 class="text-xl font-bold mb-4">Mobile-Friendly Modal</h3>
6 <p class="text-gray-600">
7 On mobile, this appears as a bottom sheet. On desktop, it's centered.
8 </p>
9 </div>
10 </div>
11</div>1<!-- Modal with proper ARIA attributes -->
2<div
3 class="fixed inset-0 z-50 overflow-y-auto"
4 aria-labelledby="modal-title"
5 role="dialog"
6 aria-modal="true"
7>
8 <!-- Backdrop -->
9 <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
10
11 <!-- Modal -->
12 <div class="flex min-h-full items-center justify-center p-4">
13 <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full">
14 <div class="p-6">
15 <h3 id="modal-title" class="text-xl font-bold text-gray-900">
16 Accessible Modal
17 </h3>
18 <div class="mt-4">
19 <p class="text-gray-600">Modal content here...</p>
20 </div>
21 <div class="mt-6 flex justify-end gap-3">
22 <button
23 type="button"
24 class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300"
25 >
26 Cancel
27 </button>
28 <button
29 type="button"
30 class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
31 >
32 Confirm
33 </button>
34 </div>
35 </div>
36 </div>
37 </div>
38</div>Use transition utilities for smooth modal animations:
1<!-- Entering (opacity and scale) -->
2<div class="opacity-0 scale-95 transition-all duration-200 ease-out">
3 <!-- Modal content -->
4</div>
5
6<!-- Active state -->
7<div class="opacity-100 scale-100 transition-all duration-200 ease-out">
8 <!-- Modal content -->
9</div>
10
11<!-- Leaving -->
12<div class="opacity-0 scale-95 transition-all duration-200 ease-in">
13 <!-- Modal content -->
14</div>Navigation is critical for user experience. Let's build responsive, accessible navigation patterns.
1<nav class="bg-white shadow-md">
2 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
3 <div class="flex justify-between items-center h-16">
4
5 <!-- Logo -->
6 <div class="flex-shrink-0 flex items-center">
7 <img class="h-8 w-auto" src="logo.svg" alt="Logo" />
8 <span class="ml-2 text-xl font-bold text-gray-900">Brand</span>
9 </div>
10
11 <!-- Desktop Navigation -->
12 <div class="hidden md:flex space-x-8">
13 <a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 font-medium">
14 Home
15 </a>
16 <a href="#" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">
17 About
18 </a>
19 <a href="#" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">
20 Services
21 </a>
22 <a href="#" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">
23 Contact
24 </a>
25 </div>
26
27 <!-- Mobile Menu Button -->
28 <div class="md:hidden">
29 <button
30 type="button"
31 class="text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md p-2"
32 aria-label="Toggle menu"
33 >
34 <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
35 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
36 </svg>
37 </button>
38 </div>
39
40 </div>
41 </div>
42
43 <!-- Mobile Menu (hidden by default) -->
44 <div class="hidden md:hidden border-t border-gray-200">
45 <div class="px-2 pt-2 pb-3 space-y-1">
46 <a href="#" class="block px-3 py-2 rounded-md text-gray-900 bg-gray-100 font-medium">
47 Home
48 </a>
49 <a href="#" class="block px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100 font-medium">
50 About
51 </a>
52 <a href="#" class="block px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100 font-medium">
53 Services
54 </a>
55 <a href="#" class="block px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100 font-medium">
56 Contact
57 </a>
58 </div>
59 </div>
60</nav>1<!-- Sidebar Navigation -->
2<aside class="w-64 bg-gray-900 min-h-screen">
3 <!-- Logo/Brand -->
4 <div class="p-6 border-b border-gray-800">
5 <h2 class="text-white text-xl font-bold">Dashboard</h2>
6 </div>
7
8 <!-- Navigation Links -->
9 <nav class="p-4">
10 <ul class="space-y-2">
11 <!-- Active Link -->
12 <li>
13 <a
14 href="#"
15 class="flex items-center px-4 py-3 text-white bg-blue-600 rounded-lg font-medium"
16 >
17 <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
18 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
19 </svg>
20 Dashboard
21 </a>
22 </li>
23
24 <!-- Inactive Links -->
25 <li>
26 <a
27 href="#"
28 class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 hover:text-white rounded-lg font-medium transition-colors"
29 >
30 <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
31 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
32 </svg>
33 Analytics
34 </a>
35 </li>
36
37 <li>
38 <a
39 href="#"
40 class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 hover:text-white rounded-lg font-medium transition-colors"
41 >
42 <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
43 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
44 </svg>
45 Users
46 </a>
47 </li>
48
49 <li>
50 <a
51 href="#"
52 class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 hover:text-white rounded-lg font-medium transition-colors"
53 >
54 <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
56 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
57 </svg>
58 Settings
59 </a>
60 </li>
61 </ul>
62 </nav>
63</aside>1<div class="border-b border-gray-200">
2 <nav class="-mb-px flex space-x-8" aria-label="Tabs">
3 <!-- Active Tab -->
4 <a
5 href="#"
6 class="border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
7 aria-current="page"
8 >
9 Profile
10 </a>
11
12 <!-- Inactive Tabs -->
13 <a
14 href="#"
15 class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
16 >
17 Settings
18 </a>
19
20 <a
21 href="#"
22 class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
23 >
24 Notifications
25 </a>
26
27 <a
28 href="#"
29 class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
30 >
31 Billing
32 </a>
33 </nav>
34</div>1<nav class="flex" aria-label="Breadcrumb">
2 <ol class="inline-flex items-center space-x-1 md:space-x-3">
3 <li class="inline-flex items-center">
4 <a href="#" class="text-gray-700 hover:text-blue-600 inline-flex items-center">
5 <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
6 <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"></path>
7 </svg>
8 Home
9 </a>
10 </li>
11 <li>
12 <div class="flex items-center">
13 <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
14 <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
15 </svg>
16 <a href="#" class="ml-1 text-gray-700 hover:text-blue-600 md:ml-2">
17 Projects
18 </a>
19 </div>
20 </li>
21 <li aria-current="page">
22 <div class="flex items-center">
23 <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
24 <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
25 </svg>
26 <span class="ml-1 text-gray-500 md:ml-2">Project Detail</span>
27 </div>
28 </li>
29 </ol>
30</nav>Forms are essential for user input. Let's build accessible, well-designed form components.
Text Input:
1<div class="mb-4">
2 <label
3 for="email"
4 class="block text-sm font-medium text-gray-700 mb-2"
5 >
6 Email Address
7 </label>
8 <input
9 type="email"
10 id="email"
11 name="email"
12 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
13 placeholder="[email protected]"
14 />
15</div>Input with Icon:
1<div class="mb-4">
2 <label for="search" class="block text-sm font-medium text-gray-700 mb-2">
3 Search
4 </label>
5 <div class="relative">
6 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
7 <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
8 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
9 </svg>
10 </div>
11 <input
12 type="text"
13 id="search"
14 class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
15 placeholder="Search..."
16 />
17 </div>
18</div>Input States:
1<!-- Default State -->
2<input
3 type="text"
4 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
5/>
6
7<!-- Success State -->
8<input
9 type="text"
10 class="w-full px-4 py-2 border-2 border-green-500 rounded-lg focus:ring-2 focus:ring-green-500"
11/>
12
13<!-- Error State -->
14<input
15 type="text"
16 class="w-full px-4 py-2 border-2 border-red-500 rounded-lg focus:ring-2 focus:ring-red-500"
17 aria-invalid="true"
18/>
19<p class="mt-1 text-sm text-red-600">This field is required</p>
20
21<!-- Disabled State -->
22<input
23 type="text"
24 disabled
25 class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100 text-gray-500 cursor-not-allowed"
26/>1<div class="mb-4">
2 <label for="country" class="block text-sm font-medium text-gray-700 mb-2">
3 Country
4 </label>
5 <select
6 id="country"
7 name="country"
8 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
9 >
10 <option value="">Select a country</option>
11 <option value="us">United States</option>
12 <option value="ca">Canada</option>
13 <option value="mx">Mexico</option>
14 <option value="uk">United Kingdom</option>
15 </select>
16</div>Checkbox:
1<div class="flex items-center mb-4">
2 <input
3 id="terms"
4 type="checkbox"
5 class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
6 />
7 <label for="terms" class="ml-2 text-sm text-gray-700">
8 I agree to the <a href="#" class="text-blue-600 hover:underline">terms and conditions</a>
9 </label>
10</div>Radio Buttons:
1<fieldset class="mb-4">
2 <legend class="text-sm font-medium text-gray-700 mb-2">
3 Notification Method
4 </legend>
5
6 <div class="space-y-3">
7 <div class="flex items-center">
8 <input
9 id="email-notification"
10 type="radio"
11 name="notification"
12 value="email"
13 class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
14 checked
15 />
16 <label for="email-notification" class="ml-2 text-sm text-gray-700">
17 Email
18 </label>
19 </div>
20
21 <div class="flex items-center">
22 <input
23 id="sms-notification"
24 type="radio"
25 name="notification"
26 value="sms"
27 class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
28 />
29 <label for="sms-notification" class="ml-2 text-sm text-gray-700">
30 SMS
31 </label>
32 </div>
33
34 <div class="flex items-center">
35 <input
36 id="push-notification"
37 type="radio"
38 name="notification"
39 value="push"
40 class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
41 />
42 <label for="push-notification" class="ml-2 text-sm text-gray-700">
43 Push Notification
44 </label>
45 </div>
46 </div>
47</fieldset>1<div class="mb-4">
2 <label for="message" class="block text-sm font-medium text-gray-700 mb-2">
3 Message
4 </label>
5 <textarea
6 id="message"
7 name="message"
8 rows="4"
9 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
10 placeholder="Enter your message..."
11 ></textarea>
12 <p class="mt-1 text-sm text-gray-500">Maximum 500 characters</p>
13</div>1<form class="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
2 <h2 class="text-2xl font-bold text-gray-900 mb-6">Contact Us</h2>
3
4 <!-- Name -->
5 <div class="mb-4">
6 <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
7 Full Name <span class="text-red-500">*</span>
8 </label>
9 <input
10 type="text"
11 id="name"
12 required
13 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
14 />
15 </div>
16
17 <!-- Email -->
18 <div class="mb-4">
19 <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
20 Email <span class="text-red-500">*</span>
21 </label>
22 <input
23 type="email"
24 id="email"
25 required
26 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
27 />
28 </div>
29
30 <!-- Subject -->
31 <div class="mb-4">
32 <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">
33 Subject
34 </label>
35 <select
36 id="subject"
37 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
38 >
39 <option>General Inquiry</option>
40 <option>Support</option>
41 <option>Feedback</option>
42 </select>
43 </div>
44
45 <!-- Message -->
46 <div class="mb-6">
47 <label for="message" class="block text-sm font-medium text-gray-700 mb-2">
48 Message <span class="text-red-500">*</span>
49 </label>
50 <textarea
51 id="message"
52 required
53 rows="4"
54 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
55 ></textarea>
56 </div>
57
58 <!-- Submit -->
59 <button
60 type="submit"
61 class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
62 >
63 Send Message
64 </button>
65</form>Dropdowns and tooltips enhance user interaction. Let's build these common UI patterns.
1<!-- Dropdown Container -->
2<div class="relative inline-block">
3 <!-- Dropdown Button -->
4 <button
5 type="button"
6 class="inline-flex items-center px-4 py-2 bg-white 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-blue-500"
7 >
8 Options
9 <svg class="ml-2 -mr-1 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
10 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
11 </svg>
12 </button>
13
14 <!-- Dropdown Panel (hidden by default, toggle with JS) -->
15 <div class="absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
16 <div class="py-1">
17 <a
18 href="#"
19 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
20 >
21 Account settings
22 </a>
23 <a
24 href="#"
25 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
26 >
27 Support
28 </a>
29 <a
30 href="#"
31 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
32 >
33 License
34 </a>
35 <div class="border-t border-gray-100"></div>
36 <a
37 href="#"
38 class="block px-4 py-2 text-sm text-red-700 hover:bg-red-50"
39 >
40 Sign out
41 </a>
42 </div>
43 </div>
44</div>1<div class="relative inline-block">
2 <button
3 type="button"
4 class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
5 >
6 Actions
7 <svg class="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
8 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
9 </svg>
10 </button>
11
12 <div class="absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
13 <div class="py-1">
14 <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
15 <svg class="mr-3 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
16 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
17 </svg>
18 Edit
19 </a>
20 <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
21 <svg class="mr-3 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
22 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
23 </svg>
24 Duplicate
25 </a>
26 <div class="border-t border-gray-100"></div>
27 <a href="#" class="flex items-center px-4 py-2 text-sm text-red-700 hover:bg-red-50">
28 <svg class="mr-3 h-5 w-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
29 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
30 </svg>
31 Delete
32 </a>
33 </div>
34 </div>
35</div>Basic Tooltip:
1<!-- Tooltip Container -->
2<div class="relative inline-block group">
3 <!-- Trigger Element -->
4 <button
5 type="button"
6 class="px-4 py-2 bg-blue-600 text-white rounded-md"
7 >
8 Hover me
9 </button>
10
11 <!-- Tooltip (shown on hover) -->
12 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
13 This is a tooltip
14 <!-- Arrow -->
15 <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
16 </div>
17</div>Tooltip Positions:
1<!-- Top Tooltip -->
2<div class="relative inline-block group">
3 <button class="px-4 py-2 bg-blue-600 text-white rounded-md">Top</button>
4 <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity">
5 Top tooltip
6 </div>
7</div>
8
9<!-- Bottom Tooltip -->
10<div class="relative inline-block group">
11 <button class="px-4 py-2 bg-blue-600 text-white rounded-md">Bottom</button>
12 <div class="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity">
13 Bottom tooltip
14 </div>
15</div>
16
17<!-- Left Tooltip -->
18<div class="relative inline-block group">
19 <button class="px-4 py-2 bg-blue-600 text-white rounded-md">Left</button>
20 <div class="absolute right-full top-1/2 -translate-y-1/2 mr-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity">
21 Left tooltip
22 </div>
23</div>
24
25<!-- Right Tooltip -->
26<div class="relative inline-block group">
27 <button class="px-4 py-2 bg-blue-600 text-white rounded-md">Right</button>
28 <div class="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-md opacity-0 group-hover:opacity-100 transition-opacity">
29 Right tooltip
30 </div>
31</div>1<div class="relative inline-block">
2 <button
3 type="button"
4 class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50"
5 >
6 Show Popover
7 </button>
8
9 <!-- Popover Panel -->
10 <div class="absolute z-10 mt-2 w-80 bg-white rounded-lg shadow-xl ring-1 ring-black ring-opacity-5">
11 <!-- Popover Header -->
12 <div class="p-4 border-b border-gray-200">
13 <h3 class="text-lg font-semibold text-gray-900">Popover Title</h3>
14 </div>
15
16 <!-- Popover Body -->
17 <div class="p-4">
18 <p class="text-sm text-gray-600 mb-3">
19 This is a popover with more detailed information. It can contain text, images, or even forms.
20 </p>
21 <button class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
22 Take Action
23 </button>
24 </div>
25 </div>
26</div>Tables, lists, and data grids are essential for displaying structured information.
1<div class="overflow-x-auto">
2 <table class="min-w-full divide-y divide-gray-200">
3 <!-- Table Head -->
4 <thead class="bg-gray-50">
5 <tr>
6 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
7 Name
8 </th>
9 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
10 Title
11 </th>
12 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
13 Status
14 </th>
15 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
16 Role
17 </th>
18 <th scope="col" class="relative px-6 py-3">
19 <span class="sr-only">Actions</span>
20 </th>
21 </tr>
22 </thead>
23
24 <!-- Table Body -->
25 <tbody class="bg-white divide-y divide-gray-200">
26 <tr class="hover:bg-gray-50">
27 <td class="px-6 py-4 whitespace-nowrap">
28 <div class="flex items-center">
29 <div class="flex-shrink-0 h-10 w-10">
30 <img class="h-10 w-10 rounded-full" src="avatar.jpg" alt="" />
31 </div>
32 <div class="ml-4">
33 <div class="text-sm font-medium text-gray-900">Jane Cooper</div>
34 <div class="text-sm text-gray-500">[email protected]</div>
35 </div>
36 </div>
37 </td>
38 <td class="px-6 py-4 whitespace-nowrap">
39 <div class="text-sm text-gray-900">Regional Paradigm Technician</div>
40 <div class="text-sm text-gray-500">Optimization</div>
41 </td>
42 <td class="px-6 py-4 whitespace-nowrap">
43 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
44 Active
45 </span>
46 </td>
47 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
48 Admin
49 </td>
50 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
51 <a href="#" class="text-blue-600 hover:text-blue-900">Edit</a>
52 </td>
53 </tr>
54 <!-- More rows... -->
55 </tbody>
56 </table>
57</div>1<ul class="divide-y divide-gray-200">
2 <li class="py-4 flex items-center hover:bg-gray-50 px-4 rounded-lg transition-colors">
3 <img class="h-12 w-12 rounded-full" src="avatar1.jpg" alt="" />
4 <div class="ml-4 flex-1">
5 <p class="text-sm font-medium text-gray-900">Lindsay Walton</p>
6 <p class="text-sm text-gray-500">Front-end Developer</p>
7 </div>
8 <button class="ml-4 px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
9 View
10 </button>
11 </li>
12
13 <li class="py-4 flex items-center hover:bg-gray-50 px-4 rounded-lg transition-colors">
14 <img class="h-12 w-12 rounded-full" src="avatar2.jpg" alt="" />
15 <div class="ml-4 flex-1">
16 <p class="text-sm font-medium text-gray-900">Tom Cook</p>
17 <p class="text-sm text-gray-500">Director of Product</p>
18 </div>
19 <button class="ml-4 px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
20 View
21 </button>
22 </li>
23</ul>1<!-- Solid Badges -->
2<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
3 Badge
4</span>
5
6<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
7 Success
8</span>
9
10<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
11 Warning
12</span>
13
14<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
15 Error
16</span>
17
18<!-- Badge with Dot -->
19<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
20 <svg class="mr-1.5 h-2 w-2 fill-current text-green-500" viewBox="0 0 8 8">
21 <circle cx="4" cy="4" r="3" />
22 </svg>
23 Online
24</span>
25
26<!-- Removable Badge -->
27<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
28 Tag Name
29 <button type="button" class="flex-shrink-0 ml-1.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-blue-400 hover:bg-blue-200 hover:text-blue-500 focus:outline-none focus:bg-blue-500 focus:text-white">
30 <span class="sr-only">Remove tag</span>
31 <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
32 <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
33 </svg>
34 </button>
35</span>1<!-- Success Alert -->
2<div class="bg-green-50 border-l-4 border-green-400 p-4 mb-4">
3 <div class="flex">
4 <div class="flex-shrink-0">
5 <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
6 <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" />
7 </svg>
8 </div>
9 <div class="ml-3">
10 <p class="text-sm text-green-700">
11 Your changes have been saved successfully.
12 </p>
13 </div>
14 </div>
15</div>
16
17<!-- Error Alert -->
18<div class="bg-red-50 border-l-4 border-red-400 p-4 mb-4">
19 <div class="flex">
20 <div class="flex-shrink-0">
21 <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
22 <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" />
23 </svg>
24 </div>
25 <div class="ml-3">
26 <h3 class="text-sm font-medium text-red-800">
27 There were errors with your submission
28 </h3>
29 <div class="mt-2 text-sm text-red-700">
30 <ul class="list-disc pl-5 space-y-1">
31 <li>Email address is required</li>
32 <li>Password must be at least 8 characters</li>
33 </ul>
34 </div>
35 </div>
36 </div>
37</div>
38
39<!-- Dismissible Alert -->
40<div class="bg-blue-50 border border-blue-400 rounded-lg p-4 mb-4 relative">
41 <button
42 type="button"
43 class="absolute top-4 right-4 text-blue-400 hover:text-blue-600"
44 aria-label="Dismiss"
45 >
46 <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
47 <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" />
48 </svg>
49 </button>
50 <div class="flex">
51 <div class="flex-shrink-0">
52 <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
53 <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" />
54 </svg>
55 </div>
56 <div class="ml-3 flex-1">
57 <p class="text-sm text-blue-700">
58 A new software update is available. See what's new in version 2.0.4.
59 </p>
60 </div>
61 </div>
62</div>Create a comprehensive dashboard card that combines multiple component patterns including headers, data display, charts, and actions.
1<!-- Dashboard Statistics Card -->
2<div class="bg-white rounded-xl shadow-lg overflow-hidden">
3 <!-- Card Header with Gradient -->
4 <div class="bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-4">
5 <div class="flex items-center justify-between">
6 <h3 class="text-xl font-bold text-white">Sales Overview</h3>
7 <span class="px-3 py-1 bg-white/20 rounded-full text-white text-sm font-medium backdrop-blur-sm">
8 Last 30 days
9 </span>
10 </div>
11 </div>
12
13 <!-- Card Body with Stats Grid -->
14 <div class="p-6">
15 <!-- Statistics Grid -->
16 <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
17 <!-- Stat 1 -->
18 <div class="text-center p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg">
19 <p class="text-2xl font-bold text-blue-900">$45.2K</p>
20 <p class="text-sm text-blue-600 mt-1">Revenue</p>
21 <div class="flex items-center justify-center mt-2 text-green-600 text-xs">
22 <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
23 <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
24 </svg>
25 +12%
26 </div>
27 </div>
28
29 <!-- Stat 2 -->
30 <div class="text-center p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-lg">
31 <p class="text-2xl font-bold text-green-900">1,234</p>
32 <p class="text-sm text-green-600 mt-1">Orders</p>
33 <div class="flex items-center justify-center mt-2 text-green-600 text-xs">
34 <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
35 <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
36 </svg>
37 +8%
38 </div>
39 </div>
40
41 <!-- Stat 3 -->
42 <div class="text-center p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg">
43 <p class="text-2xl font-bold text-purple-900">856</p>
44 <p class="text-sm text-purple-600 mt-1">Customers</p>
45 <div class="flex items-center justify-center mt-2 text-green-600 text-xs">
46 <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
47 <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
48 </svg>
49 +23%
50 </div>
51 </div>
52
53 <!-- Stat 4 -->
54 <div class="text-center p-4 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg">
55 <p class="text-2xl font-bold text-orange-900">94%</p>
56 <p class="text-sm text-orange-600 mt-1">Satisfaction</p>
57 <div class="flex items-center justify-center mt-2 text-red-600 text-xs">
58 <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
59 <path fill-rule="evenodd" d="M12 13a1 1 0 100 2h5a1 1 0 001-1V9a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586 3.707 5.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z" clip-rule="evenodd" />
60 </svg>
61 -2%
62 </div>
63 </div>
64 </div>
65
66 <!-- Recent Activity List -->
67 <div class="border-t border-gray-200 pt-4">
68 <h4 class="text-sm font-semibold text-gray-700 mb-3">Recent Activity</h4>
69 <ul class="space-y-3">
70 <li class="flex items-center justify-between py-2 px-3 hover:bg-gray-50 rounded-lg transition-colors">
71 <div class="flex items-center">
72 <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
73 <div>
74 <p class="text-sm font-medium text-gray-900">New order received</p>
75 <p class="text-xs text-gray-500">Order #4567 - $234.00</p>
76 </div>
77 </div>
78 <span class="text-xs text-gray-500">2m ago</span>
79 </li>
80 <li class="flex items-center justify-between py-2 px-3 hover:bg-gray-50 rounded-lg transition-colors">
81 <div class="flex items-center">
82 <div class="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
83 <div>
84 <p class="text-sm font-medium text-gray-900">Payment processed</p>
85 <p class="text-xs text-gray-500">Transaction ID: TXN-891234</p>
86 </div>
87 </div>
88 <span class="text-xs text-gray-500">15m ago</span>
89 </li>
90 <li class="flex items-center justify-between py-2 px-3 hover:bg-gray-50 rounded-lg transition-colors">
91 <div class="flex items-center">
92 <div class="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
93 <div>
94 <p class="text-sm font-medium text-gray-900">New customer registered</p>
95 <p class="text-xs text-gray-500">Sarah Johnson joined</p>
96 </div>
97 </div>
98 <span class="text-xs text-gray-500">1h ago</span>
99 </li>
100 </ul>
101 </div>
102 </div>
103
104 <!-- Card Footer with Actions -->
105 <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
106 <div class="flex items-center justify-between">
107 <button class="text-blue-600 hover:text-blue-700 font-semibold text-sm flex items-center">
108 <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
109 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
110 </svg>
111 Refresh
112 </button>
113 <div class="flex gap-2">
114 <button class="px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
115 Export
116 </button>
117 <button class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
118 View Details
119 </button>
120 </div>
121 </div>
122 </div>
123</div>This comprehensive dashboard card demonstrates multiple component patterns working together:
1. Card Structure:
2. Statistics Grid:
3. Activity List:
4. Footer Actions:
5. Design Principles:
This pattern can be adapted for various dashboard widgets, analytics cards, or summary components.
Now that you've mastered component patterns, you're ready to:
Challenge: Build a complete e-commerce product card with image, title, price, ratings, add-to-cart button, wishlist icon, and hover effects!
Your progress is saved in this browser, on this device only.