Composant de la liste de souhaits
Un composant de liste de souhaits minimaliste avec des images de remplacement et un thème sombre.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-4">
<h2 class="text-lg font-bold text-gray-900 dark:text-white">My Wishlist</h2>
<ul class="mt-4 space-y-4">
<li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
</div>
</div>
<button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
</li>
<li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<div class="flex items-center">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
</div>
</div>
<button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
</li>
<li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<div class="flex items-center">
<img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
</div>
</div>
<button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
</li>
</ul>
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits complexe et réactif avec un design rétro/vintage, une palette de couleurs de terre et une prise en charge du mode sombre, adapté à un blog ou à un site de contenu.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu avec des éléments skeuomorphes et des couleurs complémentaires pour un tableau de bord à thème sombre.
Glassmorphism Wishlist Component - Agriculture/Élevage
Un composant de liste de souhaits réactif avec un style de conception glassmorphism, une palette de couleurs pastel et adapté aux sites Web agricoles. Comprend des éléments translucides givrés ressemblant à du verre avec des effets de flou, du HTML sémantique et une prise en charge complète du mode sombre.