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 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.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif pour les applications de sport/fitness, avec des micro-interactions, une palette de couleurs à contraste élevé et la prise en charge du mode sombre. Les utilisateurs peuvent ajouter/supprimer des éléments et voir un retour visuel.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif pour le conseil/les services, avec des principes de conception matérielle, une palette de couleurs néon/électrique et la prise en charge du mode sombre. Il affiche les services avec des images, des titres, des descriptions et un bouton « Demander un devis », ainsi qu’un bouton « Supprimer » pour les articles.