Product Cards Component
A Brutalism style product card component with high contrast, responsive effects, and dark mode support.
HTML Code
<div class="flex flex-wrap justify-center space-x-4 space-y-4 p-5 bg-gray-100 dark:bg-gray-800">
<div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
<p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$29.99</span>
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic2/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
<p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$39.99</span>
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic3/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
<p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$49.99</span>
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
</div>
</div>
</div>
</div>Related Components
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.
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
A responsive product card component designed for dark mode, featuring vibrant colors and multiple interactive elements suitable for blogs and content consumption.