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
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 réactif avec le style de conception Glassmorphism utilisant Tailwind CSS, prenant en charge le mode sombre avec des effets de verre dépoli et des images de remplacement aléatoires.
Composant de la liste de souhaits
Un composant de liste de souhaits de style brutaliste pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et une complexité modérée. Conception réactive avec prise en charge du mode sombre à l’aide des classes CSS Tailwind.