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 réactif conçu en mode sombre à l’aide de Tailwind CSS. Il dispose d’une disposition de carte pour les éléments avec des images, des descriptions et des avatars d’utilisateur, prenant en charge le thème sombre et les effets réactifs.
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.
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.