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 della lista dei desideri reattivo progettato con elementi scheumorfici e colori complementari per una dashboard a tema scuro.
Componente Lista dei desideri
Un componente della lista dei desideri complesso e reattivo con un design retrò/vintage, una combinazione di colori dei toni della terra e il supporto della modalità scura, adatto per un blog o un sito di contenuti.
Componente Lista dei desideri
Un componente semplicistico della lista dei desideri con un approccio brutalista, utilizzando una combinazione di colori in scala di grigi, progettato per mostrare lavori o prodotti.