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.
HTML Code
<div class="max-w-xs mx-auto bg-gray-800 rounded-lg shadow-lg overflow-hidden dark:bg-gray-900">
<div class="p-4">
<h2 class="text-2xl font-bold text-white mb-2">Wishlist</h2>
<ul class="space-y-4">
<li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
<div>
<h3 class="text-lg text-white">Product Name 1</h3>
<p class="text-sm text-gray-400">$20.00</p>
</div>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
</li>
<li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/51" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
<div>
<h3 class="text-lg text-white">Product Name 2</h3>
<p class="text-sm text-gray-400">$30.00</p>
</div>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
</li>
<li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/52" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
<div>
<h3 class="text-lg text-white">Product Name 3</h3>
<p class="text-sm text-gray-400">$40.00</p>
</div>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">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 avec des éléments 3D et des couleurs pastel, prenant en charge le thème sombre. Il comprend de multiples éléments interactifs adaptés au commerce électronique. Pas de JavaScript, seulement du HTML et du CSS Tailwind.
Glassmorphism Wishlist Component
Un composant de liste de souhaits simple et réactif de style glassmorphism pour les plates-formes musicales/audio, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou et une palette de couleurs bleues d’entreprise, avec prise en charge du mode sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits de style Neumorphisme pour les médias sociaux, avec une palette de couleurs complémentaire. Il comprend un design réactif utilisant Tailwind CSS avec prise en charge du mode sombre. Seules les classes HTML et Tailwind sont utilisées, sans JavaScript. Les images proviennent de picsum.photos et les avatars de randomuser.me.