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 simple et réactif avec une esthétique monospace/développeur adapté aux applications de sport et de fitness. Dispose du noir et blanc avec une couleur d’accentuation, de la prise en charge du mode sombre et utilise le HTML sémantique.
Composant de la liste de souhaits
Un composant de liste de souhaits minimaliste / plat avec des effets réactifs et la prise en charge du thème sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits simple et réactif avec des dégradés de couleurs à contraste élevé et des transitions fluides, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.