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
Skeuomorphic Product Cards Component
Simple, responsive product cards component with a skeuomorphic design in grayscale, suitable for business/corporate websites. Includes dark mode support.
Neumorphic Product Cards Component - Retro Palette
A complex, responsive product cards component designed with a soft Neumorphic UI style, using a muted retro/vintage color palette. Features include dark mode support, subtle shadows for extrusion effect, and semantic HTML for accessibility. Suitable for reading and content consumption, such as a blog or content display.
Product Cards Component
A complex, responsive product cards component for entertainment/media platforms, featuring an organic/nature-inspired design using a forest/green palette. Includes dark mode support and interactive elements.