Composant de la liste de souhaits
Un composant de liste de souhaits simple et réactif avec une esthétique monospace/développeur adapté aux applications de sport et de fitness. Dispose du noir et blanc avec une couleur d’accentuation, de la prise en charge du mode sombre et utilise le HTML sémantique.
HTML Code
<div class="font-['JetBrains_Mono',_monospace] bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 min-h-screen">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<header class="bg-gray-900 dark:bg-gray-950 text-emerald-400 p-4 border-b-2 border-emerald-400">
<h1 class="text-xl sm:text-2xl font-bold uppercase tracking-wide text-center">{'//'} TEAM GEAR WISHLIST</h1>
</header>
<div class="p-4 sm:p-6">
<p class="text-sm mb-4 text-gray-700 dark:text-gray-300">{'#'}items.count=3; {'#'}total_value=$235.97</p>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<!-- Wishlist Item 1 -->
<li class="py-4 flex flex-col sm:flex-row items-start sm:items-center">
<img class="w-24 h-24 object-cover object-center rounded-md mr-4 mb-2 sm:mb-0 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/id/1018/150/150" alt="Basketball">
<div class="flex-1">
<h2 class="font-semibold text-lg text-emerald-500 dark:text-emerald-400">Basketball // OFFICIAL_SIZE</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm">{'>>'} For practice & games. Durable composite leather.</p>
<p class="text-base font-bold mt-1">$59.99</p>
</div>
<button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
REMOVE
</button>
</li>
<!-- Wishlist Item 2 -->
<li class="py-4 flex flex-col sm:flex-row items-start sm:items-center">
<img class="w-24 h-24 object-cover object-center rounded-md mr-4 mb-2 sm:mb-0 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/id/237/150/150" alt="Running Shoes">
<div class="flex-1">
<h2 class="font-semibold text-lg text-emerald-500 dark:text-emerald-400">Running Shoes // ATHLETE_MODEL</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm">{'>>'} Lightweight, high-performance trainers.</p>
<p class="text-base font-bold mt-1">$129.99</p>
</div>
<button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
REMOVE
</button>
</li>
<!-- Wishlist Item 3 -->
<li class="py-4 flex flex-col sm:flex-row items-start sm:items-center">
<img class="w-24 h-24 object-cover object-center rounded-md mr-4 mb-2 sm:mb-0 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/id/1004/150/150" alt="Water Bottle">
<div class="flex-1">
<h2 class="font-semibold text-lg text-emerald-500 dark:text-emerald-400">Water Bottle // INSULATED_XL</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm">{'>>'} Keeps drinks cold for hours. BPA-free.</p>
<p class="text-base font-bold mt-1">$29.99</p>
</div>
<button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
REMOVE
</button>
</li>
</ul>
<div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row justify-between items-center">
<p class="text-lg font-bold uppercase text-gray-800 dark:text-gray-200 mb-2 sm:mb-0">{'TOTAL: '} <span class="text-emerald-500 dark:text-emerald-400">$235.97</span></p>
<button class="px-6 py-3 bg-emerald-500 text-white font-bold rounded-md uppercase hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
ADD MORE ITEMS //
</button>
</div>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant simpliste de la liste de souhaits stylisé avec une approche brutaliste, utilisant une palette de couleurs en niveaux de gris, conçu pour mettre en valeur le travail ou les produits.
Composant de la liste de souhaits
Un composant de liste de souhaits avec un style de conception 3D, une palette de couleurs pastel et une conception réactive pour les sites Web d’entreprise, prenant en charge le mode sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits de style 3D pour les interfaces de médias sociaux, avec des éléments interactifs et la prise en charge du mode sombre.