Composant de la liste de souhaits
Un composant de liste de souhaits simple, de style brutaliste, pour un portfolio, avec une palette de couleurs analogue à contraste élevé. Réactivité avec prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="dark:bg-gray-900 dark:text-gray-100 bg-gray-100 text-gray-900 min-h-screen flex items-center justify-center">
<div class="container mx-auto p-4">
<div class="border-4 border-black dark:border-white p-6">
<h2 class="text-2xl font-bold mb-4 dark:text-white text-black">Wishlist</h2>
<div class="space-y-4">
<div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
<div class="flex items-center">
<img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
<div>
<h3 class="font-bold dark:text-white text-black">Product Name 1</h3>
<p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
</div>
</div>
<button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
</div>
<div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
<div class="flex items-center">
<img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
<div>
<h3 class="font-bold dark:text-white text-black">Product Name 2</h3>
<p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
</div>
</div>
<button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits Cyberpunk
Un composant complexe de liste de souhaits sur le thème du cyberpunk pour les applications de crypto-monnaie/blockchain, avec des arrière-plans sombres, des accents de bijoux néon et un design réactif avec prise en charge du mode sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits propre et fiable conçu pour les organisations à but non lucratif/caritatives, doté d’une palette de couleurs triadique et d’une réactivité totale avec prise en charge du mode sombre.
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.