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.
HTML Code
<div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-100 dark:bg-gray-900">
<!-- Product Card 1 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=1"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
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 justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$120.00
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/men/1.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">John Doe</p>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=2"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
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 justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$99.50
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/women/2.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">Jane Smith</p>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=3"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
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 justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$249.99
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/men/3.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">Peter Jones</p>
</div>
</div>
</div>
</div>
Related Components
Product Cards Component
A complex, responsive product cards component for entertainment/media platforms, featuring an organic/nature-inspired design using a forest/green palette. Includes dark mode support and interactive elements.
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.
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.