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.
HTML Code
<div class="font-sans p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-zinc-900 text-stone-800 dark:text-stone-200 border-t-4 border-amber-800 dark:border-amber-600 rounded-lg shadow-md max-w-4xl mx-auto">
<div class="flex items-center mb-4">
<svg class="w-8 h-8 mr-3 text-amber-700 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
</svg>
<h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-amber-800 dark:text-amber-300 font-mono">Wish List</h2>
</div>
<p class="text-sm sm:text-base mb-6 text-stone-700 dark:text-stone-300">
This is your personalized collection of items you're interested in. Click 'Add to Cart' to make them yours!
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Wishlist Item 1 -->
<div class="bg-white dark:bg-zinc-800 rounded-lg shadow-sm overflow-hidden border border-brown-300 dark:border-zinc-700 transition-transform duration-200 ease-in-out hover:scale-[1.01] flex flex-col">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image" class="w-full h-48 object-cover object-center border-b border-brown-300 dark:border-zinc-700">
<div class="p-4 flex-grow">
<h3 class="text-xl font-semibold mb-2 text-brown-800 dark:text-brown-200 font-mono">Vintage Record Player</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Classic design with modern capabilities. Enjoy your favorite vinyls.</p>
<p class="text-lg font-bold text-amber-700 dark:text-amber-400">$199.99</p>
</div>
<div class="px-4 pb-4">
<button class="w-full bg-burgundy-700 hover:bg-burgundy-800 text-white font-bold py-2 px-4 rounded transition-colors duration-200 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 focus:outline-none focus:ring-2 focus:ring-burgundy-500">Add to Cart</button>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="bg-white dark:bg-zinc-800 rounded-lg shadow-sm overflow-hidden border border-brown-300 dark:border-zinc-700 transition-transform duration-200 ease-in-out hover:scale-[1.01] flex flex-col">
<img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image" class="w-full h-48 object-cover object-center border-b border-brown-300 dark:border-zinc-700">
<div class="p-4 flex-grow">
<h3 class="text-xl font-semibold mb-2 text-brown-800 dark:text-brown-200 font-mono">Retro Gaming Console</h3>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Relive the 8-bit era with this multi-game console.</p>
<p class="text-lg font-bold text-amber-700 dark:text-amber-400">$79.50</p>
</div>
<div class="px-4 pb-4">
<button class="w-full bg-burgundy-700 hover:bg-burgundy-800 text-white font-bold py-2 px-4 rounded transition-colors duration-200 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 focus:outline-none focus:ring-2 focus:ring-burgundy-500">Add to Cart</button>
</div>
</div>
</div>
<div class="text-center mt-8 pt-6 border-t border-amber-200 dark:border-zinc-700 text-sm italic text-stone-500 dark:text-stone-400">
More items coming soon to your list!
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits simple et réactif pour les sites Web d’entreprise/d’entreprise avec des micro-interactions. Dispose d’un schéma de couleurs analogue (bleu-vert-sarcelle), d’une prise en charge du thème sombre et de subtiles animations de survol. Le composant affiche les éléments de la liste de souhaits avec des images de produits, des noms, des prix et des boutons d’action.
Composant de la liste de souhaits
Un composant de liste de souhaits simple et réactif avec des dégradés de couleurs à contraste élevé et des transitions fluides, adapté aux sites Web d’entreprise. Inclut la 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.