Componente Lista dei desideri
Un componente per la lista dei desideri dal design minimalista/piatto con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">My Wishlist</h2>
<div class="space-y-4">
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1018/100/100" alt="Product image">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1015/100/100" alt="Product image">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>Componenti correlati
Componente Lista dei desideri
Un semplice componente della lista dei desideri in stile brutalista per un portfolio, caratterizzato da una combinazione di colori analoga e ad alto contrasto. Reattivo con supporto per la modalità oscura utilizzando Tailwind CSS.
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.
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.