Componente Lista dei desideri
Componente della lista dei desideri dello scheumorfismo complesso con combinazione di colori complementari, per scopi di social media. Reattivo, con supporto per il tema scuro.
Codice HTML
<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>Componenti correlati
Componente Lista dei desideri
Un componente Wishlist reattivo progettato con un'estetica retrò/vintage, con combinazione di colori triadica e supporto per la modalità scura, ideale per mostrare lavori o prodotti.
Componente Lista dei desideri
Un componente reattivo della lista dei desideri progettato in modalità oscura utilizzando Tailwind CSS. Presenta un layout di carta per gli oggetti con immagini, descrizioni e avatar utente, che supporta il tema scuro e gli effetti reattivi.
Componente Lista dei desideri
Un componente reattivo per la lista dei desideri con lo stile di design Glassmorphism che utilizza Tailwind CSS, che supporta la modalità oscura con effetti simili al vetro smerigliato e immagini segnaposto casuali.