Composant de la liste de souhaits
Un composant de liste de souhaits de style brutaliste pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et une complexité modérée. Conception réactive avec prise en charge du mode sombre à l’aide des classes CSS Tailwind.
HTML Code
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<h2 class="text-2xl font-bold mb-4 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Wishlist</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item1/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 1</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$99.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
</div>
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item2/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 2</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$149.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">Out of Stock</div>
</div>
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item3/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 3</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$79.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits
Composant de la liste de souhaits en mode sombre avec un design monochromatique simple pour le tableau de bord
Composant de la liste de souhaits
Un composant simple de liste de souhaits e-commerce avec des micro-interactions et une palette de couleurs en niveaux de gris, optimisé pour le responsive design et la prise en charge du mode sombre.
Wishlist_Component
Un composant complexe, de couleur triadique, de liste de souhaits d’entreprise/professionnel adapté à un tableau de bord, doté d’un design réactif et d’une prise en charge du mode sombre.