Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu pour le mode sombre, adapté aux sites Web d’entreprise. Il comporte des éléments interactifs et une palette de couleurs complémentaire, construite à l’aide de Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gray-900 text-white p-5">
<h1 class="text-2xl font-bold mb-5">Wishlist</h1>
<div class="overflow-x-auto">
<table class="min-w-full bg-gray-800 rounded-lg shadow-lg">
<thead>
<tr class="bg-gray-700 text-gray-200">
<th class="py-2 px-4">Item</th>
<th class="py-2 px-4">Description</th>
<th class="py-2 px-4">Price</th>
<th class="py-2 px-4">Actions</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600">
<td class="py-4 px-4 flex items-center">
<img src="https://picsum.photos/50/50" alt="Item 1" class="rounded mr-3">
Item 1
</td>
<td class="py-4 px-4">This is a description of item 1.</td>
<td class="py-4 px-4">$19.99</td>
<td class="py-4 px-4">
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
<button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
</td>
</tr>
<tr class="border-b border-gray-600">
<td class="py-4 px-4 flex items-center">
<img src="https://picsum.photos/50/51" alt="Item 2" class="rounded mr-3">
Item 2
</td>
<td class="py-4 px-4">This is a description of item 2.</td>
<td class="py-4 px-4">$29.99</td>
<td class="py-4 px-4">
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
<button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
</td>
</tr>
<tr class="border-b border-gray-600">
<td class="py-4 px-4 flex items-center">
<img src="https://picsum.photos/50/52" alt="Item 3" class="rounded mr-3">
Item 3
</td>
<td class="py-4 px-4">This is a description of item 3.</td>
<td class="py-4 px-4">$39.99</td>
<td class="py-4 px-4">
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
<button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-5 flex justify-between">
<button class="bg-green-600 text-white py-2 px-5 rounded hover:bg-green-500">Move All to Cart</button>
<button class="bg-gray-600 text-white py-2 px-5 rounded hover:bg-gray-500">Clear Wishlist</button>
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu pour un tableau de bord, avec une palette de couleurs monochromatiques et un style de conception 3D.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif avec le style de conception Glassmorphism utilisant Tailwind CSS, prenant en charge le mode sombre avec des effets de verre dépoli et des images de remplacement aléatoires.
Composant de la liste de souhaits - Material Design
Un composant de liste de souhaits inspiré du design matériel avec un design réactif et une prise en charge du thème sombre.