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.
Responsive Blog Grid with Tailwind CSS
User-Friendly Travel Booking Form in Bootstrap 5
Responsive CSS3 Pricing Table with Hover Animation
Responsive Contact Us Forms in Bootstrap 5
Notification UI Design with Navbar in Bootstrap 5
Interactive Social Media Buttons with CSS and JS
Lightweight FAQ Accordion Component with CSS
Responsive Registration Form Page with Image in Tailwind
Timeline Roadmap Example in Tailwind CSS
Notification Page Design Examples in Bootstrap 5
Need Help Support Page with Search in Bootstrap 5
Responsive Get In Touch Contact Form in Tailwind CSS
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
