Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu dans une esthétique rétro/vintage, utilisant une palette de couleurs monochromatiques à des fins de commerce électronique.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">My Wishlist</h2>
<p class="text-gray-600 dark:text-gray-400">Items I'd love to get someday!</p>
</div>
<div class="divide-y divide-gray-300 dark:divide-gray-600">
<!-- Item 1 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 1" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Camera</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $120</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
<!-- Item 2 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 2" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retro Turntable</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $250</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
<!-- Item 3 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 3" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Classic Sneakers</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $80</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
</div>
<div class="px-6 py-4">
<h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Account Information</h4>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10">
<div class="ml-2">
<p class="text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">[email protected]</p>
</div>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu pour un tableau de bord, avec une palette de couleurs monochromatiques et un style de conception 3D.
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.
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.