Componente de lista de deseos
Componente de lista de deseos de skeuomorfismo complejo con combinación de colores complementaria, para fines de redes sociales. Responsivo, con soporte para Dark Theme.
Código 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>Componentes relacionados
Componente de lista de deseos
Un componente de lista de deseos responsivo diseñado para un tablero, con un esquema de color monocromático y un estilo de diseño 3D.
Componente de la lista de deseos de Glassmorphism - Agricultura/Ganadería
Un componente de lista de deseos receptivo con un estilo de diseño de glassmorphism, combinación de colores pastel y adaptado para sitios web de agricultura / ganadería. Cuenta con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, HTML semántico y compatibilidad total con el modo oscuro.
Componente de lista de deseos
Un componente de lista de deseos complejo y receptivo con un diseño retro / vintage, combinación de colores en tono tierra y compatibilidad con modo oscuro, adecuado para un blog o sitio de contenido.