Componentes Lista de deseos Componente de lista de deseos

Componente de lista de deseos

Un componente de lista de deseos simple y de estilo brutalista para un portafolio, con un esquema de color análogo de alto contraste. Responsivo con soporte de modo oscuro usando Tailwind CSS.

Vista previa

Código HTML

<div class="dark:bg-gray-900 dark:text-gray-100 bg-gray-100 text-gray-900 min-h-screen flex items-center justify-center">
  <div class="container mx-auto p-4">
    <div class="border-4 border-black dark:border-white p-6">
      <h2 class="text-2xl font-bold mb-4 dark:text-white text-black">Wishlist</h2>
      <div class="space-y-4">
        <div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
            <div>
              <h3 class="font-bold dark:text-white text-black">Product Name 1</h3>
              <p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
            </div>
          </div>
          <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
        </div>
        <div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
            <div>
              <h3 class="font-bold dark:text-white text-black">Product Name 2</h3>
              <p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
            </div>
          </div>
          <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
        </div>
      </div>
    </div>
  </div>
</div>

Componentes relacionados

Componente de lista de deseos

Un componente de lista de deseos con estilo de diseño 3D, combinación de colores pastel y diseño receptivo para sitios web comerciales, compatible con el modo oscuro.

Abrir

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.

Abrir

Componente de lista de deseos

Un componente de lista de deseos limpio y confiable diseñado para organizaciones sin fines de lucro/benéficas, con un esquema de color triádico y una capacidad de respuesta completa con soporte para modo oscuro.

Abrir