Componente de lista de deseos
Un componente responsivo de la lista de deseos con una estética de diseño retro/vintage, que utiliza una combinación de colores monocromática para fines de comercio electrónico.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">My Wishlist</h2>
<p class="text-gray-600 dark:text-gray-400">Items I'd love to get someday!</p>
</div>
<div class="divide-y divide-gray-300 dark:divide-gray-600">
<!-- Item 1 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 1" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Camera</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $120</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
<!-- Item 2 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 2" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retro Turntable</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $250</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
<!-- Item 3 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 3" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Classic Sneakers</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $80</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
</div>
<div class="px-6 py-4">
<h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Account Information</h4>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10">
<div class="ml-2">
<p class="text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">[email protected]</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de lista de deseos
Un componente de lista de deseos al estilo Neumorphism para redes sociales, con una combinación de colores complementaria. Incluye un diseño responsivo que utiliza Tailwind CSS con soporte para modo oscuro. Solo se utilizan las clases HTML y Tailwind, sin JavaScript. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.
Componente de lista de deseos
Un componente minimalista de la lista de deseos con imágenes de marcador de posición y un tema oscuro.
Componente de lista de deseos
Un componente simple de lista de deseos de comercio electrónico con microinteracciones y un esquema de color en escala de grises, optimizado para un diseño receptivo y compatibilidad con el modo oscuro.