Componentes Fichas de producto Componente Tarjetas de producto

Componente Tarjetas de producto

Un componente de tarjeta de producto responsivo con diseño de Glassmorphism, combinación de colores en escala de grises y compatibilidad con temas oscuros. Incluye múltiples elementos interactivos adecuados para las interfaces de redes sociales, como la imagen del producto, el título, la descripción, el precio y el botón Agregar al carrito. El diseño utiliza elementos translúcidos similares al vidrio escarchado con efectos de desenfoque. No se utiliza Javascript, solo HTML con clases CSS de Tailwind.

Vista previa

Código HTML

<div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-100 dark:bg-gray-900">
  <!-- Product Card 1 -->
  <div
    class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
    style="backdrop-filter: blur(10px);"
  >
    <img
      class="object-cover w-full h-64"
      src="https://picsum.photos/400/250?random=1"
      alt="Product Image"
    />
    <div
      class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
    ></div>
    <div class="relative p-6">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 1</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
      </p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          $120.00
        </span>
        <button
          class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
        >
          View Details
        </button>
      </div>
      <div class="flex items-center mt-4">
        <img
          class="w-10 h-10 mr-4 rounded-full"
          src="https://randomuser.me/api/portraits/men/1.jpg"
          alt="Avatar"
        />
        <p class="text-gray-700 dark:text-gray-400">John Doe</p>
      </div>
    </div>
  </div>

  <!-- Product Card 2 -->
  <div
    class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
    style="backdrop-filter: blur(10px);"
  >
    <img
      class="object-cover w-full h-64"
      src="https://picsum.photos/400/250?random=2"
      alt="Product Image"
    />
    <div
      class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
    ></div>
    <div class="relative p-6">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 2</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
      </p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          $99.50
        </span>
        <button
          class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
        >
          View Details
        </button>
      </div>
      <div class="flex items-center mt-4">
        <img
          class="w-10 h-10 mr-4 rounded-full"
          src="https://randomuser.me/api/portraits/women/2.jpg"
          alt="Avatar"
        />
        <p class="text-gray-700 dark:text-gray-400">Jane Smith</p>
      </div>
    </div>
  </div>

  <!-- Product Card 3 -->
  <div
    class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
    style="backdrop-filter: blur(10px);"
  >
    <img
      class="object-cover w-full h-64"
      src="https://picsum.photos/400/250?random=3"
      alt="Product Image"
    />
    <div
      class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
    ></div>
    <div class="relative p-6">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 3</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
      </p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          $249.99
        </span>
        <button
          class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
        >
          View Details
        </button>
      </div>
      <div class="flex items-center mt-4">
        <img
          class="w-10 h-10 mr-4 rounded-full"
          src="https://randomuser.me/api/portraits/men/3.jpg"
          alt="Avatar"
        />
        <p class="text-gray-700 dark:text-gray-400">Peter Jones</p>
      </div>
    </div>
  </div>
</div>

Componentes relacionados