E-commerce Card
Responsive E-commerce Card Component with Dark Mode Support using Tailwind CSS and Material Design principles. Features a vibrant color scheme with moderate complexity including interactive elements like buttons and hover effects. Uses grid-based layout and incorporates shadows for depth.
HTML Code
<div class="dark:bg-gray-800 dark:text-white p-4 rounded-lg shadow-lg grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="relative"> <img class="w-full h-48 object-cover rounded" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image"> <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> -20% </div> </div> <div class="flex flex-col justify-between"> <div> <h3 class="text-xl font-bold dark:text-white">Product Title</h3> <p class="text-gray-600 dark:text-gray-300">Short product description with vibrant accents.</p> <div class="flex items-center mt-2"> <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">$19.99</span> <span class="text-sm text-gray-500 line-through ml-2">$24.99</span> </div> </div> <div class="flex space-x-2 mt-4"> <button class="flex-grow bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-700 dark:hover:bg-blue-800"> Add to Cart </button> <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded dark:bg-gray-600 dark:hover:bg-gray-700 dark:text-white"> Wishlist </button> </div> </div> </div>Related Components
Cards Component
A responsive portfolio card component with a brutalist design style, utilizing a pastel color scheme and moderate complexity with interactive features. This card showcases work or products and supports dark mode.
Skeuomorphic Cards Component
Inspired by Skeuomorphism, the following card component is fully responsive with dark theme support. For dark mode, CSS support is sufficient. No JavaScript is needed.