Product Cards Component
Product Card Component with Brutalism style, Monochromatic color scheme, Complex complexity level for E-commerce purpose.
HTML Code
<div class="dark:bg-stone-900 bg-stone-100 p-6">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 1</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$49.99</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$59.99</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 2</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$75.00</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$90.00</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 3</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$120.00</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$150.00</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</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
Responsive product cards with Glassmorphism frosted glass effect using pastel colors, with dark mode support. Suitable for social media interfaces.
Product Cards Component
A responsive product cards component with microinteractions, utilizing a grayscale color scheme and supporting dark mode. Ideal for blog or content consumption purposes.