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 Tailwind CSS Stepper Component
Dark Themed Bootstrap 5 Accordion with Custom Icons
Fully Responsive CSS Price Table Grid and Plan Details
Responsive TailwindCSS Footer with Gallery Section
Bootstrap 5 Alerts for Error, Warning, Info, and Success
Interactive MCQ Container with CSS & JavaScript
Responsive Tailwind CSS Testimonial Slider with Alpine.js Functionality
Bootstrap 5 Full Height Swiper Slider with Smooth Transitions
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
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
