Skeuomorphic Product Card
A Skeuomorphic Product Card component for a dashboard, styled with grayscale, medium complexity, responsive with dark mode.
HTML Code
<div class="max-w-xs mx-auto bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="relative">
<img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product image">
<div class="absolute top-0 right-0 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-xs px-2 py-1 m-2 rounded-md">New</div>
</div>
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-bold text-xl mb-2">Product Name</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features and benefits.</p>
<div class="flex items-center justify-between">
<span class="text-gray-900 dark:text-white font-bold text-lg">$199.99</span>
<button class="bg-gray-600 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-500 text-white dark:text-gray-900 font-bold py-2 px-4 rounded-md">Add to Cart</button>
</div>
</div>
</div>Related Components
Product Cards Component 52
A responsive product card component utilizing Glassmorphism design style with dark theme support and Tailwind CSS.
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 responsive product card component with a Skeuomorphism design style, earth tone color scheme, and complex interactions, suitable for a portfolio. It includes dark theme support and uses Tailwind CSS for styling. Images are sourced from picsum.photos and avatars from randomuser.me.