Product Cards Component
A responsive product cards component designed using Material Design principles with Tailwind CSS. It supports dark mode and features shadows and grid-based layouts.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Product Cards</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=1" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=2" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$39.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/150?random=3" alt="Product Image" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-400">$49.99</p>
<p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
</div>
</div>
</div>
</div>Related Components
Skeuomorphic Product Card
A Skeuomorphic Product Card component for a dashboard, styled with grayscale, medium complexity, responsive with dark mode.
Product Cards Component
A responsive product card component with microinteractions in Earth tones, providing dark theme support for portfolio showcasing.
Product Cards Component
A responsive product card component designed for dark mode, featuring vibrant colors and multiple interactive elements suitable for blogs and content consumption.