Product Cards Component
A brutalist styled product cards component with responsive effects and dark theme support using Tailwind CSS.
HTML Code
<div class="flex flex-wrap justify-center p-4 bg-gray-100 dark:bg-gray-800">
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 1</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 2</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 3</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
</div>Related Components
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.
Product Cards Component
Product Cards Component for social media with a dark triadic color scheme and moderate complexity. It uses Tailwind CSS for a responsive design with dark mode support, and includes placeholders for images and avatars.
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.