Product Cards Component
A responsive product cards component designed with 3D elements and a vibrant color scheme, incorporating a dark theme for blog and content consumption. It features medium complexity with interactive elements for user engagement.
HTML Code
<div class="flex flex-wrap justify-center space-x-4 space-y-4 p-6 bg-white dark:bg-gray-900">
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-red-400 to-orange-400 dark:from-red-600 dark:to-orange-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Product Title</h2>
<p class="text-gray-800 dark:text-gray-400">This is a brief description of the product that engages the reader's attention.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-blue-400 to-purple-400 dark:from-blue-600 dark:to-purple-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Another Product Title</h2>
<p class="text-gray-800 dark:text-gray-400">This product offers great features and has received positive feedback from users.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-green-400 to-teal-400 dark:from-green-600 dark:to-teal-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Exciting New Product</h2>
<p class="text-gray-800 dark:text-gray-400">Discover the amazing capabilities of this product that make your life easier.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
</div>Related Components
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.
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 simple e-commerce product card component designed in Material Design style using a grayscale color scheme and responsive design with dark theme support.