Componente Lista dei desideri
Componente Wishlist con design 3D, combinazione di colori analoga e complessità semplice per lo scopo della dashboard, con design reattivo e supporto per temi scuri.
Codice HTML
<div class="dark:bg-gray-900 bg-gray-100 min-h-screen p-4">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden md:max-w-2xl transform transition-all duration-300 hover:scale-105">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48 transform translate-x-2 translate-y-2 rotate-3 shadow-lg rounded-lg" src="https://picsum.photos/seed/wishlist/400/300" alt="Product image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Wishlist Item</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Awesome Product Name</a>
<p class="mt-2 text-gray-500 dark:text-gray-400">A short description of the product, highlighting its key features and benefits.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
<button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Lista dei desideri
Un componente della lista dei desideri semplice e reattivo adatto a piattaforme di appuntamenti o di connessione sociale, caratterizzato da un'estetica di design 3D con toni blu aziendali e supporto per la modalità scura.
Componente Lista dei desideri
Un componente della lista dei desideri minimalista e reattivo con un tema arcobaleno sfumato multicolore, adatto per siti Web di notizie o giornalismo. Include il supporto per la modalità oscura ed elementi interattivi.
Componente Lista dei desideri
Un componente reattivo per la lista dei desideri con lo stile di design Glassmorphism che utilizza Tailwind CSS, che supporta la modalità oscura con effetti simili al vetro smerigliato e immagini segnaposto casuali.