Product Cards Component
A responsive product card component with microinteractions in Earth tones, providing dark theme support for portfolio showcasing.
HTML Code
<div class="flex flex-wrap justify-center p-4">
<!-- Product Card -->
<div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Brief description of the product that highlights its features and benefits.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-2">
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Designer</p>
</div>
</div>
</div>
</div>
<!-- Repeat for more products -->
<div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Another product description highlighting its unique aspects.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
<div class="ml-2">
<p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Developer</p>
</div>
</div>
</div>
</div>
</div>Related Components
Product Cards Component
A simple responsive product card component with microinteractions, designed for social media interfaces using Tailwind CSS, supporting dark theme and grayscale color scheme.
Product Cards Component - Agriculture/Farming
A responsive product card component designed for agriculture and farming websites, featuring clean typography, grid systems, and autumn colors. Includes dark mode support.
Art Deco Candy Product Cards
A responsive product cards component with an Art Deco inspired design and a cheerful candy color scheme, suitable for booking and reservation systems. Includes dark mode support.