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.
Join Our Community Call-to-Action Banner Section With Tailwind CSS
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
