Componente Lista dei desideri
Un componente semplicistico della lista dei desideri con un approccio brutalista, utilizzando una combinazione di colori in scala di grigi, progettato per mostrare lavori o prodotti.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-black dark:text-white mb-4">Wishlist</h2>
<ul class="space-y-4">
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 1.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 2.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 3.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
</ul>
</div>Componenti correlati
Componente Lista dei desideri
Un componente della lista dei desideri reattivo progettato con elementi 3D, toni della terra e supporto della modalità oscura per mostrare lavori o prodotti.
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.
Componente Wishlist - Material Design
Un componente della lista dei desideri ispirato al Material Design con design reattivo e supporto per temi scuri.