Product Cards Component
A responsive product card component designed in a minimalist style with a pastel color scheme, suitable for business or corporate websites, and includes dark mode support.
HTML Code
<div class="container mx-auto p-6">
<h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-200">Product Cards</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
<div class="p-4">
<img src="https://picsum.photos/300/203" alt="Product Image" class="w-full h-48 object-cover rounded-md">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
<button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>Related Components
Product Cards Component
A responsive product card component designed in Material Design style, featuring a grayscale color scheme. It includes an image, title, description, and a button with dark mode support using Tailwind CSS.
Product Cards Component
A simple e-commerce product card component designed in Material Design style using a grayscale color scheme and responsive design with dark theme support.
Product Cards Component
A responsive product card component with Glassmorphism design, grayscale color scheme, and dark theme support. It includes multiple interactive elements suitable for social media interfaces, such as product image, title, description, price, and add to cart button. The design utilizes froster glass-like translucent elements with blur effects. No Javascript is used, only HTML with Tailwind CSS classes.