Product Card Grid with Images and Pricing in Tailwind
<!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>
</head>
<body>
<div class="p-1 flex flex-wrap items-center justify-center">
<div class="flex-shrink-0 m-6 relative overflow-hidden bg-orange-500 rounded-lg max-w-xs shadow-lg">
<svg class="absolute bottom-0 left-0 mb-8" viewBox="0 0 375 283" fill="none"
style="transform: scale(1.5); opacity: 0.1;">
<rect x="159.52" y="175" width="152" height="152" rx="8" transform="rotate(-45 159.52 175)" fill="white" />
<rect y="107.48" width="152" height="152" rx="8" transform="rotate(-45 0 107.48)" fill="white" />
</svg>
<div class="relative pt-10 px-10 flex items-center justify-center">
<div class="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3"
style="background: radial-gradient(black, transparent 60%); transform: rotate3d(0, 0, 1, 20deg) scale3d(1, 0.6, 1); opacity: 0.2;">
</div>
<img class="relative w-40" src="https://user-images.githubusercontent.com/2805249/64069899-8bdaa180-cc97-11e9-9b19-1a9e1a254c18.png" alt="">
</div>
<div class="relative text-white px-6 pb-6 mt-6">
<span class="block opacity-75 -mb-1">Indoor</span>
<div class="flex justify-between">
<span class="block font-semibold text-xl">Peace Lily</span>
<span class="block bg-white rounded-full text-orange-500 text-xs font-bold px-3 py-2 leading-none flex items-center">$36.00</span>
</div>
</div>
</div>
<div class="flex-shrink-0 m-6 relative overflow-hidden bg-teal-500 rounded-lg max-w-xs shadow-lg">
<svg class="absolute bottom-0 left-0 mb-8" viewBox="0 0 375 283" fill="none"
style="transform: scale(1.5); opacity: 0.1;">
<rect x="159.52" y="175" width="152" height="152" rx="8" transform="rotate(-45 159.52 175)" fill="white" />
<rect y="107.48" width="152" height="152" rx="8" transform="rotate(-45 0 107.48)" fill="white" />
</svg>
<div class="relative pt-10 px-10 flex items-center justify-center">
<div class="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3"
style="background: radial-gradient(black, transparent 60%); transform: rotate3d(0, 0, 1, 20deg) scale3d(1, 0.6, 1); opacity: 0.2;">
</div>
<img class="relative w-40" src="https://user-images.githubusercontent.com/2805249/64069998-305de300-cc9a-11e9-8ae7-5a0fe00299f2.png" alt="">
</div>
<div class="relative text-white px-6 pb-6 mt-6">
<span class="block opacity-75 -mb-1">Outdoor</span>
<div class="flex justify-between">
<span class="block font-semibold text-xl">Monstera</span>
<span class="block bg-white rounded-full text-teal-500 text-xs font-bold px-3 py-2 leading-none flex items-center">$45.00</span>
</div>
</div>
</div>
<div class="flex-shrink-0 m-6 relative overflow-hidden bg-purple-500 rounded-lg max-w-xs shadow-lg">
<svg class="absolute bottom-0 left-0 mb-8" viewBox="0 0 375 283" fill="none"
style="transform: scale(1.5); opacity: 0.1;">
<rect x="159.52" y="175" width="152" height="152" rx="8" transform="rotate(-45 159.52 175)" fill="white" />
<rect y="107.48" width="152" height="152" rx="8" transform="rotate(-45 0 107.48)" fill="white" />
</svg>
<div class="relative pt-10 px-10 flex items-center justify-center">
<div class="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3"
style="background: radial-gradient(black, transparent 60%); transform: rotate3d(0, 0, 1, 20deg) scale3d(1, 0.6, 1); opacity: 0.2;">
</div>
<img class="relative w-40" src="https://user-images.githubusercontent.com/2805249/64069899-8bdaa180-cc97-11e9-9b19-1a9e1a254c18.png" alt="">
</div>
<div class="relative text-white px-6 pb-6 mt-6">
<span class="block opacity-75 -mb-1">Outdoor</span>
<div class="flex justify-between">
<span class="block font-semibold text-xl">Oak Tree</span>
<span class="block bg-white rounded-full text-purple-500 text-xs font-bold px-3 py-2 leading-none flex items-center">$68.50</span>
</div>
</div>
</div>
<div class="flex-shrink-0 m-6 relative overflow-hidden bg-purple-500 rounded-lg max-w-xs shadow-lg">
<svg class="absolute bottom-0 left-0 mb-8" viewBox="0 0 375 283" fill="none"
style="transform: scale(1.5); opacity: 0.1;">
<rect x="159.52" y="175" width="152" height="152" rx="8" transform="rotate(-45 159.52 175)" fill="white" />
<rect y="107.48" width="152" height="152" rx="8" transform="rotate(-45 0 107.48)" fill="white" />
</svg>
<div class="relative pt-10 px-10 flex items-center justify-center">
<div class="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3"
style="background: radial-gradient(black, transparent 60%); transform: rotate3d(0, 0, 1, 20deg) scale3d(1, 0.6, 1); opacity: 0.2;">
</div>
<img class="relative w-40" src="https://user-images.githubusercontent.com/2805249/64069899-8bdaa180-cc97-11e9-9b19-1a9e1a254c18.png" alt="">
</div>
<div class="relative text-white px-6 pb-6 mt-6">
<span class="block opacity-75 -mb-1">Outdoor</span>
<div class="flex justify-between">
<span class="block font-semibold text-xl">Oak Tree</span>
<span class="block bg-white rounded-full text-purple-500 text-xs font-bold px-3 py-2 leading-none flex items-center">$68.50</span>
</div>
</div>
</div>
<div class="flex-shrink-0 m-6 relative overflow-hidden bg-purple-500 rounded-lg max-w-xs shadow-lg">
<svg class="absolute bottom-0 left-0 mb-8" viewBox="0 0 375 283" fill="none"
style="transform: scale(1.5); opacity: 0.1;">
<rect x="159.52" y="175" width="152" height="152" rx="8" transform="rotate(-45 159.52 175)" fill="white" />
<rect y="107.48" width="152" height="152" rx="8" transform="rotate(-45 0 107.48)" fill="white" />
</svg>
<div class="relative pt-10 px-10 flex items-center justify-center">
<div class="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3"
style="background: radial-gradient(black, transparent 60%); transform: rotate3d(0, 0, 1, 20deg) scale3d(1, 0.6, 1); opacity: 0.2;">
</div>
<img class="relative w-40" src="https://user-images.githubusercontent.com/2805249/64069899-8bdaa180-cc97-11e9-9b19-1a9e1a254c18.png" alt="">
</div>
<div class="relative text-white px-6 pb-6 mt-6">
<span class="block opacity-75 -mb-1">Outdoor</span>
<div class="flex justify-between">
<span class="block font-semibold text-xl">Oak Tree</span>
<span class="block bg-white rounded-full text-purple-500 text-xs font-bold px-3 py-2 leading-none flex items-center">$68.50</span>
</div>
</div>
</div>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Tailwind CSS snippet provides a visually appealing and responsive product card grid designed to showcase your products effectively. The grid features product images, titles, pricing information, and customizable styling options. It's a versatile component suitable for various e-commerce and product display purposes.
Key Features:
- Responsive Design: The product card grid adapts seamlessly to different screen sizes, ensuring a consistent user experience across 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 cards present product information in a clear and concise manner, making it easy for users to understand and compare products.
- Product Images: Display high-quality product images to visually showcase the items.
- Pricing Information: Include product prices or other relevant pricing details.
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 cards, and card elements (images, titles, prices).
- 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.
