1.
Text & Font
1. text-sm - Small text
2. text-lg - Large text
3. text-xl - Extra large text
4. text-2xl - Bigger than xl
5. text-3xl - Even bigger text
6. font-bold - Bold text
7. font-light - Light text
8. italic - Slanted text
9. underline - Underline text
10. line-through - Cut-through text
---
2. Text Color
11. text-red-500 - Red text
12. text-blue-600 - Blue text
13. text-green-400 - Green text
14. text-gray-700 - Dark gray text
15. text-white - White text
16. text-black - Black text
17. text-transparent - Invisible text
18. text-opacity-50 - 50% transparent text
19. text-opacity-100 - Fully visible text
20. text-gray-300 - Light gray text
---
3. Background Color
21. bg-red-500 - Red background
22. bg-blue-600 - Blue background
23. bg-green-400 - Green background
24. bg-gray-700 - Dark gray background
25. bg-white - White background
26. bg-black - Black background
27. bg-opacity-50 - 50% transparent background
28. bg-opacity-100 - Fully visible background
29. bg-gradient-to-r from-blue-400 to-purple-600 - Blue-to-purple gradient
30. bg-gradient-to-l from-green-300 to-yellow-500 - Green-to-yellow gradient
---
4. Borders
31. border - Thin border
32. border-2 - Thicker border
33. border-4 - Even thicker border
34. border-red-500 - Red border
35. border-blue-600 - Blue border
36. border-dashed - Dashed border
37. border-dotted - Dotted border
38. border-double - Double border
39. border-none - No border
40. rounded-lg - Slightly rounded edges
---
5. Padding (Space inside the box)
41. p-1 - Tiny padding
42. p-2 - Small padding
43. p-4 - Medium padding
44. p-8 - Big padding
45. px-4 - Padding on left & right
46. py-2 - Padding on top & bottom
47. pt-6 - Padding only on top
48. pb-4 - Padding only on bottom
49. pl-2 - Padding only on left
50. pr-3 - Padding only on right
---
6. Margin (Space outside the box)
51. m-1 - Tiny margin
52. m-2 - Small margin
53. m-4 - Medium margin
54. m-8 - Big margin
55. mx-4 - Margin on left & right
56. my-2 - Margin on top & bottom
57. mt-6 - Margin only on top
58. mb-4 - Margin only on bottom
59. ml-2 - Margin only on left
60. mr-3 - Margin only on right
---
7. Width & Height
61. w-10 - 10 pixels wide
62. w-20 - 20 pixels wide
63. w-full - Full width of the screen
64. w-1/2 - Half width of the screen
65. w-1/3 - One-third width of the screen
66. h-10 - 10 pixels height
67. h-20 - 20 pixels height
68. h-full - Full height of the screen
69. min-h-screen - Minimum height to fit the full screen
70. max-w-md - Maximum width medium size
---
8. Display & Positioning
71. block - Shows like a full block
72. inline-block - Small block inside text
73. hidden - Hides the element
74. absolute - Positioned absolutely (fixed to a parent)
75. relative - Positioned relative to its normal place
76. top-4 - Moves 4px down
77. bottom-8 - Moves 8px up
78. left-2 - Moves 2px to the right
79. right-6 - Moves 6px to the left
80. z-50 - Puts the element on top of others
---
9. Flexbox (For layouts)
81. flex - Turns into a flex container
82. flex-row - Items are side-by-side
83. flex-col - Items are stacked
84. justify-start - Items start from the left
85. justify-center - Items are centered
86. justify-between - Items spread out evenly
87. items-start - Items aligned at the top
88. items-center - Items aligned in the middle
89. items-end - Items aligned at the bottom
90. gap-4 - Space between items
---
10. Shadows & Opacity
91. shadow-sm - Small shadow
92. shadow-lg - Large shadow
93. shadow-xl - Extra large shadow
94. opacity-0 - Invisible
95. opacity-50 - 50% see-through
96. opacity-100 - Fully visible
97. hover:bg-blue-500 - Background changes on hover
98. hover:scale-105 - Element grows slightly on hover
99. hover:rotate-3 - Element tilts slightly on hover
100. transition-all - Smooth animation
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
1. Simple Navbar
html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<nav class="bg-blue-600 p-4 text-white flex justify-between">
<div class="text-lg font-bold">MyWebsite</div>
<div>
<a href="" class="px-3">Home</a>
<a href="" class="px-3">About</a>
<a href="" class="px-3">Contact</a>
</div>
</nav>
</body>
</html>
✅ Use case: A responsive navigation bar for any website.
---
2. Hero Section
html
<div class="h-screen flex items-center justify-center bg-gray-200">
<div class="text-center">
<h1 class="text-4xl font-bold text-gray-800">Welcome to My Site</h1>
<p class="text-lg text-gray-600 mt-2">We build amazing web experiences</p>
<button class="mt-4 bg-blue-500 text-white px-6 py-2 rounded font-bold">Get
Started</button>
</div>
</div>
✅ Use case: A homepage header with a call-to-action button.
---
3. Responsive Card
html
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover"
src="https://source.unsplash.com/400x300/?nature" alt="Nature">
<div class="p-4">
<h2 class="text-xl font-bold">Beautiful Nature</h2>
<p class="text-gray-600">Explore the beauty of nature with us.</p>
</div>
</div>
✅ Use case: A responsive card for blog posts, products, or images.
---
4. Login Form
html
<div class="flex items-center justify-center h-screen bg-gray-100">
<form class="bg-white p-6 rounded shadow-lg w-80">
<h2 class="text-xl font-bold mb-4">Login</h2>
<input type="text" placeholder="Username" class="w-full p-2 border border-
gray-300 rounded mb-3">
<input type="password" placeholder="Password" class="w-full p-2 border
border-gray-300 rounded mb-3">
<button class="w-full bg-blue-500 text-white p-2 rounded">Login</button>
</form>
</div>
✅ Use case: A login form for authentication.
---
5. Footer Section
html
<footer class="bg-gray-800 text-white text-center p-4">
© 2025 MyWebsite. All rights reserved.
</footer>
✅ Use case: A simple website footer.
---
6. Product Card
html
<div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover"
src="https://source.unsplash.com/400x300/?product" alt="Product">
<div class="p-4">
<h2 class="text-lg font-bold">Product Name</h2>
<p class="text-gray-600">$29.99</p>
<button class="mt-2 bg-blue-500 text-white px-4 py-2 rounded">Buy
Now</button>
</div>
</div>
✅ Use case: Displaying products in an online store.
---
7. Testimonial Section
html
<div class="bg-gray-100 p-6 text-center">
<p class="text-xl font-bold">"Tailwind CSS made web development so easy!"</p>
<p class="text-gray-600 mt-2">- John Doe, Web Developer</p>
</div>
✅ Use case: A section for customer reviews.
---
8. Team Section
html
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<img class="w-24 h-24 mx-auto rounded-full"
src="https://source.unsplash.com/100x100/?person" alt="Person">
<p class="font-bold">Jane Doe</p>
<p class="text-gray-600">CEO</p>
</div>
<div>
<img class="w-24 h-24 mx-auto rounded-full"
src="https://source.unsplash.com/100x100/?person2" alt="Person">
<p class="font-bold">John Smith</p>
<p class="text-gray-600">CTO</p>
</div>
</div>
✅ Use case: Showcasing team members.
---
9. Pricing Table
html
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg p-6">
<h2 class="text-xl font-bold text-center">Basic Plan</h2>
<p class="text-gray-600 text-center">$9.99/month</p>
<ul class="mt-4 text-gray-600">
<li>✅ 10GB Storage</li>
<li>✅ 24/7 Support</li>
</ul>
<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded w-
full">Subscribe</button>
</div>
✅ Use case: Pricing plans for services.
---
10. Profile Card
html
<div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden text-
center">
<img class="w-32 h-32 mx-auto rounded-full mt-4"
src="https://source.unsplash.com/100x100/?person" alt="User">
<h2 class="text-lg font-bold mt-2">John Doe</h2>
<p class="text-gray-600">Web Developer</p>
</div>
✅ Use case: Displaying user profiles.
11. Login Form
html
<div class="flex items-center justify-center h-screen bg-gray-100">
<form class="bg-white p-6 rounded shadow-lg w-80">
<h2 class="text-xl font-bold mb-4">Login</h2>
<input type="email" placeholder="Email" class="w-full p-2 border border-
gray-300 rounded mb-3">
<input type="password" placeholder="Password" class="w-full p-2 border
border-gray-300 rounded mb-3">
<button class="w-full bg-blue-500 text-white p-2 rounded">Login</button>
</form>
</div>
✅ Use case: A clean login form for authentication.
---
12. Modal Popup
html
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<div class="bg-white p-6 rounded shadow-lg">
<h2 class="text-lg font-bold">Modal Title</h2>
<p class="mt-2">This is a simple modal popup.</p>
<button class="mt-4 bg-blue-500 text-white px-4 py-2
rounded">Close</button>
</div>
</div>
✅ Use case: A modal for confirmations or messages.
---
13. Responsive Navigation Bar
html
<nav class="bg-gray-800 p-4 text-white flex justify-between">
<h2 class="text-lg font-bold">Brand</h2>
<ul class="flex space-x-4">
<li><a href="" class="hover:text-gray-300">Home</a></li>
<li><a href="" class="hover:text-gray-300">About</a></li>
<li><a href="" class="hover:text-gray-300">Contact</a></li>
</ul>
</nav>
✅ Use case: A responsive navbar for websites.
---
14. Footer Section
html
<footer class="bg-gray-900 text-white p-4 text-center">
<p>© 2024 Your Company. All rights reserved.</p>
</footer>
✅ Use case: A simple footer for websites.
---
15. User Profile Card
html
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg p-6 text-center">
<img class="w-16 h-16 mx-auto rounded-full"
src="https://source.unsplash.com/100x100/?face" alt="User">
<h2 class="text-lg font-bold mt-2">John Doe</h2>
<p class="text-gray-600">Web Developer</p>
</div>
✅ Use case: Displaying user profiles.
---
16. Product Card (E-commerce)
html
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg p-4">
<img src="https://source.unsplash.com/200x150/?shoes" class="w-full rounded">
<h2 class="text-lg font-bold mt-2">Stylish Sneakers</h2>
<p class="text-gray-600">$59.99</p>
<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Add to
Cart</button>
</div>
✅ Use case: A product listing in an online store.
---
17. Progress Bar
html
<div class="w-full bg-gray-300 rounded h-4">
<div class="bg-blue-500 h-4 rounded" style="width: 70%;"></div>
</div>
✅ Use case: Showing progress (like file upload progress).
---
18. Testimonial Section
html
<div class="max-w-lg mx-auto bg-gray-100 p-6 text-center rounded shadow-lg">
<p class="italic">"This product changed my life!"</p>
<p class="font-bold mt-2">- Jane Smith</p>
</div>
✅ Use case: Displaying customer reviews.
---
19. Card with Hover Effect
html
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg p-4 transform transition
hover:scale-105">
<h2 class="text-lg font-bold">Hover Me</h2>
<p class="text-gray-600">This card grows when hovered.</p>
</div>
✅ Use case: Enhancing UI with hover effects.
---
20. Mobile-Friendly Grid Layout
html
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 p-4">
<div class="bg-blue-500 p-6 text-white text-center">1</div>
<div class="bg-red-500 p-6 text-white text-center">2</div>
<div class="bg-green-500 p-6 text-white text-center">3</div>
<div class="bg-yellow-500 p-6 text-white text-center">4</div>
</div>
✅ Use case: A flexible, responsive grid layout.
---
21. Contact Form
html
<div class="flex items-center justify-center h-screen bg-gray-100">
<form class="bg-white p-6 rounded shadow-lg w-80">
<h2 class="text-xl font-bold mb-4">Contact Us</h2>
<input type="text" placeholder="Name" class="w-full p-2 border border-gray-
300 rounded mb-3">
<input type="email" placeholder="Email" class="w-full p-2 border border-
gray-300 rounded mb-3">
<textarea placeholder="Message" class="w-full p-2 border border-gray-300
rounded mb-3"></textarea>
<button class="w-full bg-blue-500 text-white p-2 rounded">Send</button>
</form>
</div>
✅ Use case: A simple contact form for user inquiries.
---
22. Sticky Header
html
<header class="fixed top-0 left-0 w-full bg-gray-800 text-white p-4 shadow-md">
<h1 class="text-center text-lg">Sticky Header</h1>
</header>
✅ Use case: A navigation header that stays on top when scrolling.
---
23. Blog Post Layout
html
<div class="max-w-2xl mx-auto bg-white p-6 shadow-lg">
<h2 class="text-2xl font-bold">How to Learn Tailwind CSS</h2>
<p class="text-gray-600 mt-2">Tailwind CSS is a utility-first CSS framework
that makes styling easy...</p>
</div>
✅ Use case: A clean blog post format.
---
24. Dashboard Sidebar
html
<div class="h-screen w-64 bg-gray-900 text-white p-6 fixed">
<h2 class="text-xl font-bold">Dashboard</h2>
<ul class="mt-4">
<li class="p-2 hover:bg-gray-700">Home</li>
<li class="p-2 hover:bg-gray-700">Profile</li>
<li class="p-2 hover:bg-gray-700">Settings</li>
</ul>
</div>
✅ Use case: A sidebar navigation for admin dashboards.
---
25. Animated Button
html
<button class="bg-blue-500 text-white px-6 py-2 rounded transform transition
hover:scale-110">Hover Me</button>
✅ Use case: A button that enlarges when hovered.
---
26. FAQ Section
html
<div class="max-w-lg mx-auto">
<details class="mb-2 bg-gray-100 p-4 rounded">
<summary class="cursor-pointer font-bold">What is Tailwind CSS?</summary>
<p class="mt-2 text-gray-600">Tailwind is a utility-first CSS framework for
building custom designs fast.</p>
</details>
</div>
✅ Use case: An FAQ section with collapsible answers.
---
27. Loading Spinner
html
<div class="flex justify-center items-center h-screen">
<div class="animate-spin rounded-full h-16 w-16 border-t-4
border-blue-500"></div>
</div>
✅ Use case: A simple spinning loader for waiting screens.
---
28. Notification Alert
html
<div class="bg-green-500 text-white p-3 rounded shadow-lg">
✅ Successfully Saved!
</div>
✅ Use case: A success message after a user action.
---
29. Call-to-Action Section
html
<div class="bg-blue-600 text-white text-center p-10">
<h2 class="text-2xl font-bold">Join Us Today!</h2>
<button class="mt-4 bg-white text-blue-600 px-4 py-2 rounded">Sign Up</button>
</div>
✅ Use case: A CTA section for signing up.
---
30. Testimonial Carousel
html
<div class="max-w-md mx-auto bg-gray-100 p-6 text-center rounded shadow-lg">
<p class="italic">"Tailwind CSS made my website design so easy!"</p>
<p class="font-bold mt-2">- Alex Smith</p>
</div>
✅ Use case: Displaying customer reviews.
---
31. Pricing Card
html
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg p-6 text-center">
<h2 class="text-xl font-bold">Pro Plan</h2>
<p class="text-gray-600">$19.99/month</p>
<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Get
Started</button>
</div>
✅ Use case: A pricing card for services.
---
32. 404 Page
html
<div class="h-screen flex flex-col justify-center items-center">
<h1 class="text-4xl font-bold">404</h1>
<p class="text-gray-600">Oops! Page not found.</p>
</div>
✅ Use case: Displaying an error page.
---
33. Profile Badge
html
<div class="flex items-center bg-gray-200 p-4 rounded">
<img class="w-12 h-12 rounded-full" src="https://source.unsplash.com/50x50/?
person" alt="User">
<div class="ml-3">
<p class="font-bold">Jane Doe</p>
<p class="text-gray-600">Web Designer</p>
</div>
</div>
✅ Use case: Showing a user’s profile in a small space.
---
34. Hero Section with Background Image
html
<div class="h-screen bg-cover bg-center flex items-center justify-center text-
white" style="background-image: url('https://source.unsplash.com/1600x900/?
technology');">
<h1 class="text-4xl font-bold">Welcome to Our Website</h1>
</div>
✅ Use case: A visually appealing landing page header.
---
35. Newsletter Signup
html
<div class="text-center p-6 bg-gray-100">
<h2 class="text-xl font-bold">Subscribe to our Newsletter</h2>
<input type="email" placeholder="Enter your email" class="mt-2 p-2 border
rounded">
<button class="ml-2 bg-blue-500 text-white px-4 py-2
rounded">Subscribe</button>
</div>
✅ Use case: Collecting user emails.
---
36. Gradient Background Card
html
<div class="max-w-sm mx-auto p-6 text-white bg-gradient-to-r from-purple-500 to-
blue-500 rounded-lg shadow-lg">
<h2 class="text-xl font-bold">Tailwind CSS</h2>
<p class="mt-2">A modern way to build web designs fast.</p>
</div>
✅ Use case: A stylish card with gradient colors.
---
37. Animated Card Flip
html
<div class="relative w-40 h-40 bg-gray-800 text-white flex items-center justify-
center transform transition hover:rotate-180">
Hover Me
</div>
✅ Use case: A card that flips on hover.
---
38. Image Gallery Grid
html
<div class="grid grid-cols-3 gap-4">
<img src="https://source.unsplash.com/100x100/?nature" class="w-full rounded">
<img src="https://source.unsplash.com/100x100/?city" class="w-full rounded">
<img src="https://source.unsplash.com/100x100/?mountain" class="w-full
rounded">
</div>
✅ Use case: A photo gallery.
---
39. Social Media Icons
html
<div class="flex justify-center space-x-4">
<a href="" class="text-blue-500">🔵 Facebook</a>
<a href="" class="text-blue-400">🔷 Twitter</a>
<a href="" class="text-pink-500">💗 Instagram</a>
</div>
✅ Use case: Linking social media accounts.
---
40. Shopping Cart UI
html
<div class="bg-white p-4 shadow-lg rounded-lg max-w-sm mx-auto">
<h2 class="font-bold text-lg">Shopping Cart</h2>
<p>2 items</p>
<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Checkout</button>
</div>
✅ Use case: A shopping cart for e-commerce.
---
