Responsive Product Card Grid with Tailwind CSS Hover Effect
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<div class="text-center p-10">
<h1 class="font-bold text-4xl mb-4">Responsive Product card grid</h1>
<h1 class="text-3xl">Tailwind CSS</h1>
</div>
<!-- Grid Section - Starts Here -->
<section id="Projects"
class="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5">
<!-- Product card 1 - Starts Here -->
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
<a href="#">
<img src="https://images.unsplash.com/photo-1646753522408-077ef9839300?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NjZ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
<div class="px-4 py-3 w-72">
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
<div class="flex items-center">
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
<del>
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
</del>
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
<path
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
</svg></div>
</div>
</div>
</a>
</div>
<!-- Product card 1 - Ends Here -->
<!-- Product card 2 - Starts Here -->
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
<a href="#">
<img src="https://images.unsplash.com/photo-1651950519238-15835722f8bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Mjh8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
<div class="px-4 py-3 w-72">
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
<div class="flex items-center">
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
<del>
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
</del>
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
<path
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
</svg></div>
</div>
</div>
</a>
</div>
<!-- Product card 2- Ends Here -->
<!-- Product card 3 - Starts Here -->
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
<a href="#">
<img src="https://images.unsplash.com/photo-1651950537598-373e4358d320?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjV8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
<div class="px-4 py-3 w-72">
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
<div class="flex items-center">
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
<del>
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
</del>
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
<path
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
</svg></div>
</div>
</div>
</a>
</div>
<!-- Product card 3 - Ends Here -->
<!-- Product card 4 - Starts Here -->
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
<a href="#">
<img src="https://images.unsplash.com/photo-1651950540805-b7c71869e689?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Mjl8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
<div class="px-4 py-3 w-72">
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
<div class="flex items-center">
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
<del>
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
</del>
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
<path
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
</svg></div>
</div>
</div>
</a>
</div>
<!-- Product card 4 - Ends Here -->
<!-- Product card 5 - Starts Here -->
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
<a href="#">
<img src="https://images.unsplash.com/photo-1649261191624-ca9f79ca3fc6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NDd8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
<div class="px-4 py-3 w-72">
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
<div class="flex items-center">
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
<del>
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
</del>
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
<path
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
</svg></div>
</div>
</div>
</a>
</div>
<!-- Product card 5 - Ends Here -->
<!-- Product card 6 - Starts Here -->
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
<a href="#">
<img src="https://images.unsplash.com/photo-1649261191606-cb2496e97eee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
<div class="px-4 py-3 w-72">
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
<div class="flex items-center">
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
<del>
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
</del>
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
<path
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
</svg></div>
</div>
</div>
</a>
</div>
<!-- Product card 6 - Ends Here -->
</section>
<!-- Grid Section - Ends Here -->
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {}
}
}
</script>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Tailwind CSS snippet provides a clean and visually appealing product card grid layout. It offers a flexible and customizable way to display multiple products on your website, making it easy for users to browse and compare different options. The grid is designed to adapt seamlessly to various screen sizes, ensuring a consistent user experience across devices.
Key Features:
- Responsive Design: The product card grid automatically adjusts its layout to fit different screen sizes, providing a great user experience on desktops, tablets, and mobile devices.
- Customizable Styling: Easily modify the appearance of the product cards using Tailwind CSS utility classes to match your website's design and branding.
- Clear and Concise Presentation: The product cards are designed to present product information in a clear and concise manner, including images, titles, descriptions, and prices.
- Hover Effects: Add visually appealing hover effects to the product cards to enhance user engagement and provide additional information on hover.
- Lightweight and Efficient: The code is optimized for performance, ensuring fast loading times and a smooth user experience.
Implementation:
- Include Tailwind CSS: Ensure you have Tailwind CSS installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the product card grid, including the container, product card rows, and columns.
- Customize as Needed: Modify the Tailwind CSS classes and HTML structure to customize the appearance and content of the product cards according to your specific requirements.
Stylish Contact Form with Image in Tailwind CSS
Responsive Registration Form with Image in Tailwind CSS
Bootstrap 5 Payment Method Form Page with Invoice
Modern Pricing Table Design with Bootstrap 4
Responsive Multi-Level Drop-Down Navigation Menu in CSS
Interactive Bottom Navigation Bar Indicator with CSS
Real-time Password Strength Indicator in Bootstrap 5
Responsive Video Card Component for Tailwind CSS
Responsive Feature Highlight Component with Tailwind CSS
Multi-Step Form with International Phone Input and Nice Select
Responsive Review Cards Component with CSS3
Responsive CSS3 Timeline Design With Hover Effects
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
