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
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 product card component featuring engaging microinteractions and a monochromatic color scheme. Designed for business websites, it is responsive and supports dark mode.
Product Cards Component with Dark Mode UI
Product Cards Component with Dark Mode UI and responsive effects using Tailwind CSS.