Carta e-commerce
Componente reattivo della scheda di e-commerce con supporto della modalità oscura utilizzando i principi di Tailwind CSS e Material Design. Presenta una combinazione di colori vivaci con complessità moderata, inclusi elementi interattivi come pulsanti ed effetti al passaggio del mouse. Utilizza il layout basato su griglia e incorpora le ombre per la profondità.
Codice HTML
<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>Componenti correlati
Crypto_Blockchain_Cards_Component
Un set di schede reattive progettate per applicazioni di criptovaluta e blockchain, con una combinazione di colori neutri caldi, ombre ispirate ai materiali e supporto per la modalità oscura.
Componente Schede
Un componente di carte complesso progettato per la modalità scura, adatto per il consumo di blog e contenuti con una combinazione di colori triadica.
Componente della scheda Skeuomorphism
Un componente di carta reattivo in stile Skeuomorphism con supporto per la modalità oscura utilizzando Tailwind CSS. Include immagini segnaposto e avatar.