Tailwind CSS
Building Card & Grid Layouts
Building Card & Grid Layouts
Master the art of building flexible, responsive card components and grid layouts with Tailwind CSS. Learn component patterns, grid systems, and advanced hover effects for modern web interfaces.
Basic Card Component
Start with a simple card structure that serves as a foundation:
Simple Card HTML
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white">
<img class="w-full h-48 object-cover" src="/image.jpg" alt="Card image">
<div class="px-6 py-4">
<h3 class="font-bold text-xl mb-2 text-gray-900">
Card Title
</h3>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
</p>
</div>
<div class="px-6 pt-4 pb-6">
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
Read More
</button>
</div>
</div>
Overflow Hidden: The
overflow-hidden class is crucial for rounded corners on images. Without it, the image corners won't respect the parent's rounded-lg class.
Card with Badge and Tags
Enhance cards with badges, tags, and metadata:
Enhanced Card Component
<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white hover:shadow-2xl transition-shadow duration-300">
<div class="relative">
<img class="w-full h-48 object-cover" src="/image.jpg" alt="Product">
<!-- Badge overlay -->
<div class="absolute top-2 right-2">
<span class="bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full">
NEW
</span>
</div>
</div>
<div class="px-6 py-4">
<!-- Category badge -->
<span class="inline-block bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded-full mb-2">
Technology
</span>
<h3 class="font-bold text-xl mb-2 text-gray-900 hover:text-blue-600 cursor-pointer transition-colors">
Ultimate Guide to Web Development
</h3>
<p class="text-gray-600 text-sm mb-4">
Learn the fundamentals of modern web development with this comprehensive guide covering HTML, CSS, and JavaScript.
</p>
<!-- Meta info -->
<div class="flex items-center text-xs text-gray-500 mb-4">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
</svg>
<span>March 15, 2024</span>
<span class="mx-2">•</span>
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
</svg>
<span>1.2k views</span>
</div>
<!-- Tags -->
<div class="flex flex-wrap gap-2">
<span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded">#webdev</span>
<span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded">#tutorial</span>
<span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded">#coding</span>
</div>
</div>
<div class="px-6 pb-4 border-t border-gray-100 pt-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="/avatar.jpg" alt="Author">
<div>
<p class="text-sm font-semibold text-gray-900">John Doe</p>
<p class="text-xs text-gray-500">Web Developer</p>
</div>
</div>
<button class="text-blue-600 hover:text-blue-700 font-semibold text-sm">
Read More →
</button>
</div>
</div>
</div>
Image Overlay: Use
relative on the image container and absolute on badges to position them over the image. Common positions: top-2 right-2, top-2 left-2, bottom-2 right-2.
Horizontal Card Layout
Create cards that display content side-by-side:
Horizontal Card Component
<div class="max-w-2xl bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<div class="md:flex">
<!-- Image section -->
<div class="md:w-1/3">
<img class="w-full h-full object-cover" src="/product.jpg" alt="Product">
</div>
<!-- Content section -->
<div class="md:w-2/3 p-6">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-semibold text-blue-600 uppercase tracking-wide">
Featured
</span>
<span class="text-2xl font-bold text-gray-900">
$299
</span>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">
Premium Wireless Headphones
</h3>
<p class="text-gray-600 text-sm mb-4">
Experience crystal-clear audio with our premium wireless headphones. Featuring active noise cancellation and 30-hour battery life.
</p>
<!-- Features list -->
<ul class="space-y-2 mb-4">
<li class="flex items-center text-sm text-gray-700">
<svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
Active Noise Cancellation
</li>
<li class="flex items-center text-sm text-gray-700">
<svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
30-Hour Battery Life
</li>
<li class="flex items-center text-sm text-gray-700">
<svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
Premium Sound Quality
</li>
</ul>
<div class="flex gap-2">
<button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
Add to Cart
</button>
<button class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>Responsive Card Grid
Create grid layouts that adapt to different screen sizes:
Basic Responsive Grid
<div class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold text-gray-900 mb-8">Featured Products</h2>
<!-- Grid: 1 column on mobile, 2 on tablet, 3 on desktop, 4 on xl -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
<img class="w-full h-48 object-cover" src="/product1.jpg" alt="Product 1">
<div class="p-4">
<h3 class="font-semibold text-lg mb-2">Product Name</h3>
<p class="text-gray-600 text-sm mb-3">Short description goes here</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900">$49.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors">
Buy Now
</button>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
<img class="w-full h-48 object-cover" src="/product2.jpg" alt="Product 2">
<div class="p-4">
<h3 class="font-semibold text-lg mb-2">Product Name</h3>
<p class="text-gray-600 text-sm mb-3">Short description goes here</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900">$79.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors">
Buy Now
</button>
</div>
</div>
</div>
<!-- Repeat cards... -->
</div>
</div>
Gap Spacing: Use
gap-4, gap-6, or gap-8 for consistent spacing between grid items. This is much cleaner than adding margins to individual cards.
Masonry-Style Layout
Create Pinterest-style masonry grids with varying heights:
CSS Grid Masonry (Chrome 115+)
<!-- Using columns for masonry effect -->
<div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
<!-- Card 1 - Short -->
<div class="break-inside-avoid">
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
<img class="w-full h-auto" src="/tall-image.jpg" alt="Image">
<div class="p-4">
<h3 class="font-bold text-lg mb-2">Short Card</h3>
<p class="text-gray-600 text-sm">Brief description.</p>
</div>
</div>
</div>
<!-- Card 2 - Tall -->
<div class="break-inside-avoid">
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
<img class="w-full h-auto" src="/very-tall-image.jpg" alt="Image">
<div class="p-4">
<h3 class="font-bold text-lg mb-2">Tall Card</h3>
<p class="text-gray-600 text-sm">
Much longer description that takes up more vertical space in the layout...
</p>
</div>
</div>
</div>
<!-- Card 3 - Medium -->
<div class="break-inside-avoid">
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
<img class="w-full h-auto" src="/medium-image.jpg" alt="Image">
<div class="p-4">
<h3 class="font-bold text-lg mb-2">Medium Card</h3>
<p class="text-gray-600 text-sm">
Medium length description here.
</p>
</div>
</div>
</div>
<!-- More cards... -->
</div>
Column Layout: The
columns utility creates a masonry effect using CSS multi-column layout. Use break-inside-avoid to prevent cards from breaking across columns.
Feature Section Cards
Build feature cards for landing pages and marketing sites:
Feature Card Grid
<div class="bg-gray-50 py-16">
<div class="max-w-7xl mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Why Choose Us</h2>
<p class="text-lg text-gray-600">Discover the features that make us stand out</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-white rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Lightning Fast</h3>
<p class="text-gray-600 leading-relaxed">
Our platform is optimized for speed, delivering your content in milliseconds.
</p>
</div>
<!-- Feature 2 -->
<div class="bg-white rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Secure & Private</h3>
<p class="text-gray-600 leading-relaxed">
Your data is encrypted and protected with industry-leading security measures.
</p>
</div>
<!-- Feature 3 -->
<div class="bg-white rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Affordable Pricing</h3>
<p class="text-gray-600 leading-relaxed">
Get enterprise features at a fraction of the cost with our flexible plans.
</p>
</div>
</div>
</div>
</div>Pricing Cards
Create pricing card layouts for subscription plans:
Pricing Card Grid
<div class="bg-gray-50 py-16">
<div class="max-w-7xl mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-900 mb-4">Choose Your Plan</h2>
<p class="text-lg text-gray-600">Select the perfect plan for your needs</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Basic Plan -->
<div class="bg-white rounded-2xl shadow-lg overflow-hidden">
<div class="p-8">
<h3 class="text-2xl font-bold text-gray-900 mb-2">Basic</h3>
<p class="text-gray-600 mb-6">Perfect for individuals</p>
<div class="mb-6">
<span class="text-5xl font-bold text-gray-900">$9</span>
<span class="text-gray-600">/month</span>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">10 Projects</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">5GB Storage</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Email Support</span>
</li>
</ul>
<button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-900 font-semibold py-3 px-6 rounded-lg transition-colors">
Get Started
</button>
</div>
</div>
<!-- Pro Plan (Featured) -->
<div class="bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl shadow-2xl overflow-hidden transform scale-105 relative">
<div class="absolute top-0 right-0 bg-yellow-400 text-gray-900 text-xs font-bold px-4 py-1 rounded-bl-lg">
POPULAR
</div>
<div class="p-8 text-white">
<h3 class="text-2xl font-bold mb-2">Pro</h3>
<p class="text-blue-100 mb-6">Best for professionals</p>
<div class="mb-6">
<span class="text-5xl font-bold">$29</span>
<span class="text-blue-100">/month</span>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<svg class="w-5 h-5 text-white mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>Unlimited Projects</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-white mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>50GB Storage</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-white mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>Priority Support</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-white mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span>Advanced Analytics</span>
</li>
</ul>
<button class="w-full bg-white hover:bg-gray-100 text-blue-600 font-semibold py-3 px-6 rounded-lg transition-colors">
Get Started
</button>
</div>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-2xl shadow-lg overflow-hidden">
<div class="p-8">
<h3 class="text-2xl font-bold text-gray-900 mb-2">Enterprise</h3>
<p class="text-gray-600 mb-6">For large organizations</p>
<div class="mb-6">
<span class="text-5xl font-bold text-gray-900">$99</span>
<span class="text-gray-600">/month</span>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Unlimited Everything</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">500GB Storage</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">24/7 Phone Support</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Custom Integrations</span>
</li>
</ul>
<button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-900 font-semibold py-3 px-6 rounded-lg transition-colors">
Contact Sales
</button>
</div>
</div>
</div>
</div>
</div>
Featured Card Scaling: Be careful with
scale-105 on featured cards in grids. It can cause overflow issues. Consider using ring-4 ring-blue-500 or a "Popular" badge instead.
Testimonial Cards
Build testimonial card layouts with quotes and ratings:
Testimonial Grid
<div class="bg-gray-900 py-16">
<div class="max-w-7xl mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-white mb-4">What Our Customers Say</h2>
<p class="text-lg text-gray-400">Real feedback from real users</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
<!-- Star rating -->
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
</div>
<!-- Quote -->
<p class="text-gray-300 mb-6 leading-relaxed">
"This product has completely transformed the way we work. The team is responsive and the features are exactly what we needed."
</p>
<!-- Author -->
<div class="flex items-center">
<img class="w-12 h-12 rounded-full mr-4" src="/avatar1.jpg" alt="Sarah Johnson">
<div>
<p class="font-semibold text-white">Sarah Johnson</p>
<p class="text-sm text-gray-400">CEO, TechCorp</p>
</div>
</div>
</div>
<!-- More testimonial cards... -->
</div>
</div>
</div>Advanced Hover Effects
Add interactive hover effects to make cards more engaging:
Card with Complex Hover Effects
<div class="group relative max-w-sm rounded-xl overflow-hidden shadow-lg bg-white cursor-pointer">
<!-- Image with overlay -->
<div class="relative overflow-hidden">
<img
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500"
src="/image.jpg"
alt="Card"
>
<!-- Overlay that appears on hover -->
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div class="absolute bottom-4 left-4 right-4">
<button class="w-full bg-white text-gray-900 font-semibold py-2 px-4 rounded-lg transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
View Details
</button>
</div>
</div>
</div>
<!-- Content -->
<div class="p-6">
<div class="flex items-center justify-between mb-2">
<span class="text-sm font-semibold text-blue-600">FEATURED</span>
<div class="flex items-center">
<svg class="w-4 h-4 text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
<span class="text-sm font-semibold text-gray-700">4.8</span>
</div>
</div>
<h3 class="font-bold text-xl mb-2 text-gray-900 group-hover:text-blue-600 transition-colors">
Premium Product Name
</h3>
<p class="text-gray-600 text-sm mb-4">
High-quality product description that highlights the key features and benefits.
</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900">$199</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Add to Cart
</button>
</div>
</div>
</div>Exercise 1: Build a Product Card Grid
Create a responsive grid of product cards:
- 1 column on mobile, 2 on tablet, 3 on desktop, 4 on xl screens
- Each card has: image, title, price, rating, and "Add to Cart" button
- Hover effect: shadow increases and image scales slightly
- Include a "Sale" badge on 2-3 products
- Use consistent spacing with gap utilities
Exercise 2: Pricing Page Layout
Build a complete pricing page with three tiers:
- Basic, Pro (featured), and Enterprise plans
- Featured plan has different styling (gradient background, scale-105)
- Each plan shows: price, list of features, CTA button
- Responsive: stack vertically on mobile, 3 columns on desktop
- Include a toggle for monthly/annual billing
Exercise 3: Masonry Blog Grid
Create a masonry-style blog post grid:
- Use column utilities for masonry layout
- Cards with varying content lengths (some short, some long)
- Each card: featured image, category badge, title, excerpt, author, date
- Hover effects on images and titles
- 1 column mobile, 2 tablet, 3 desktop