Composant de la liste de souhaits
Composant de liste de souhaits avec conception 3D, schéma de couleurs analogue et complexité simple à des fins de tableau de bord, avec conception réactive et prise en charge du thème sombre.
HTML Code
<div class="dark:bg-gray-900 bg-gray-100 min-h-screen p-4">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden md:max-w-2xl transform transition-all duration-300 hover:scale-105">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48 transform translate-x-2 translate-y-2 rotate-3 shadow-lg rounded-lg" src="https://picsum.photos/seed/wishlist/400/300" alt="Product image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Wishlist Item</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Awesome Product Name</a>
<p class="mt-2 text-gray-500 dark:text-gray-400">A short description of the product, highlighting its key features and benefits.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
<button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>Composants associés
RetroWishlistComponent
Un composant de liste de souhaits simple et réactif avec une esthétique rétro/vintage, une palette de couleurs d’automne et une prise en charge du mode sombre, adapté aux sites de documentation ou de base de connaissances.
Composant de la liste de souhaits
Un composant de liste de souhaits complexe et réactif pour les applications SaaS avec des effets néon/lumineux et une palette de couleurs analogue, prenant en charge le mode sombre.
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.