Composant de la liste de souhaits
Composant de liste de souhaits de skeuomorphisme complexe avec schéma de couleurs complémentaires, à des fins de médias sociaux. Réactif, avec prise en charge du thème sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center font-sans">
<!-- Skeuomorphic Container -->
<div class="w-full max-w-4xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-3xl
shadow-2xl dark:shadow-none
border-t-2 border-l-2 border-gray-50 dark:border-gray-600
border-r-2 border-b-2 border-gray-400 dark:border-gray-900
p-8 space-y-8
relative
overflow-hidden">
<!-- Inner Bevel/Emboss Effect -->
<div class="absolute inset-4 rounded-2xl
bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-700
shadow-inner-xl dark:shadow-inner-dark
opacity-75">
</div>
<div class="relative z-10">
<h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center
drop-shadow-lg dark:drop-shadow-none
[text-shadow:_0_2px_0_rgb(0_0_0_/_40%)] dark:[text-shadow:_0_2px_0_rgb(0_0_0_/_60%)]">
My Wishlist
</h1>
<!-- Wishlist Items Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Wishlist Item 1 -->
<div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800
rounded-2xl p-6
shadow-lg dark:shadow-xl
border-t border-l border-slate-50 dark:border-slate-600
border-r border-b border-slate-300 dark:border-slate-900
flex flex-col items-center space-y-4
transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
<img src="https://picsum.photos/seed/item1/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Retro Gaming Console</h3>
<p class="text-gray-600 dark:text-gray-300 text-center text-sm">A classic console for nostalgic gaming sessions.</p>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
<span class="text-sm text-gray-700 dark:text-gray-200">@john_doe</span>
</div>
<button class="w-full py-3 rounded-xl
bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700
text-white font-bold
shadow-md dark:shadow-lg
border-t border-l border-indigo-400 dark:border-indigo-500
border-r border-b border-blue-700 dark:border-blue-800
active:shadow-inner active:from-blue-600 active:to-indigo-500
transform transition duration-200
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
<i class="fas fa-heart mr-2"></i> Add to Cart
</button>
</div>
<!-- Wishlist Item 2 -->
<div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800
rounded-2xl p-6
shadow-lg dark:shadow-xl
border-t border-l border-slate-50 dark:border-slate-600
border-r border-b border-slate-300 dark:border-slate-900
flex flex-col items-center space-y-4
transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
<img src="https://picsum.photos/seed/item2/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Vintage Camera</h3>
<p class="text-gray-600 dark:text-gray-300 text-center text-sm">Capture moments with a classic aesthetic.</p>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
<span class="text-sm text-gray-700 dark:text-gray-200">@jane_smith</span>
</div>
<button class="w-full py-3 rounded-xl
bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700
text-white font-bold
shadow-md dark:shadow-lg
border-t border-l border-indigo-400 dark:border-indigo-500
border-r border-b border-blue-700 dark:border-blue-800
active:shadow-inner active:from-blue-600 active:to-indigo-500
transform transition duration-200
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
<i class="fas fa-heart mr-2"></i> Add to Cart
</button>
</div>
<!-- Wishlist Item 3 -->
<div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800
rounded-2xl p-6
shadow-lg dark:shadow-xl
border-t border-l border-slate-50 dark:border-slate-600
border-r border-b border-slate-300 dark:border-slate-900
flex flex-col items-center space-y-4
transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
<img src="https://picsum.photos/seed/item3/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Mechanical Keyboard</h3>
<p class="text-gray-600 dark:text-gray-300 text-center text-sm">Satisfying clicks for your typing pleasure.</p>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
<span class="text-sm text-gray-700 dark:text-gray-200">@mike_wong</span>
</div>
<button class="w-full py-3 rounded-xl
bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700
text-white font-bold
shadow-md dark:shadow-lg
border-t border-l border-indigo-400 dark:border-indigo-500
border-r border-b border-blue-700 dark:border-blue-800
active:shadow-inner active:from-blue-600 active:to-indigo-500
transform transition duration-200
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
<i class="fas fa-heart mr-2"></i> Add to Cart
</button>
</div>
</div>
<!-- Call to Action / Share Wishlist Button -->
<div class="mt-10 text-center">
<button class="py-4 px-8 rounded-full
bg-gradient-to-br from-green-400 to-emerald-500 dark:from-green-600 dark:to-emerald-700
text-white font-extrabold text-lg
shadow-xl dark:shadow-none
border-t border-l border-green-200 dark:border-green-500
border-r border-b border-emerald-600 dark:border-emerald-800
active:shadow-inner active:from-emerald-500 active:to-green-400
transform transition duration-200
focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-opacity-75">
<i class="fas fa-share-alt mr-3"></i> Share My Wishlist
</button>
</div>
</div>
</div>
</div>
<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Custom Tailwind CSS (for inner shadow) -->
<style>
.shadow-inner-xl {
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
}
.dark .shadow-inner-dark {
box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05), inset 0 0 30px rgba(255, 255, 255, 0.02);
}
</style>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits réactif avec des éléments 3D et des couleurs pastel, prenant en charge le thème sombre. Il comprend de multiples éléments interactifs adaptés au commerce électronique. Pas de JavaScript, seulement du HTML et du CSS Tailwind.
Composant de la liste de souhaits
Un composant de liste de souhaits minimaliste et réactif avec un thème arc-en-ciel dégradé multicolore, adapté aux sites d’actualités ou de journalisme. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant de la liste de souhaits
Un composant simple de liste de souhaits e-commerce avec des micro-interactions et une palette de couleurs en niveaux de gris, optimisé pour le responsive design et la prise en charge du mode sombre.