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
Wishlist_Component
Un composant de liste de souhaits réactif et artistique pour les applications de sport/fitness, doté d’une palette de couleurs vert forêt, avec des textures douces et peintes et une prise en charge du mode sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu pour le mode sombre, adapté aux sites Web d’entreprise. Il comporte des éléments interactifs et une palette de couleurs complémentaire, construite à l’aide de Tailwind CSS.
Glassmorphism_Wishlist_Component
Un composant de liste de souhaits complexe et réactif avec un design Glassmorphism avec des tons océan/bleu, optimisé pour les plateformes de rencontres/sociales. Comprend la prise en charge du mode sombre et des éléments interactifs.