Componentes Fichas de producto Componente Tarjetas de producto

Componente Tarjetas de producto

Un componente de tarjetas de producto responsivo diseñado en un estilo brutalista con Tailwind CSS, con soporte para temas oscuros y uso de imágenes de marcador de posición.

Vista previa

Código HTML

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/201" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/202" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/203" alt="Product Image">
      <div class="p-6">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
          <p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-gray-800 {
      background-color: #2d3748;
    }
    .text-gray-600 {
      color: #a0aec0;
    }
    .border-gray-300 {
      border-color: #4a5568;
    }
  }
</style>

Componentes relacionados

Componente Tarjetas de producto

Un componente de tarjeta de producto receptivo con microinteracciones, diseño monocromático y compatibilidad con temas oscuros.

Abrir

Componente Tarjetas de producto

Un componente de tarjeta de producto responsivo con un estilo de diseño Skeuomorphism, una combinación de colores en tonos tierra e interacciones complejas, adecuado para una cartera. Incluye soporte para temas oscuros y utiliza Tailwind CSS para el estilo. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.

Abrir

Componente Tarjetas de producto

Un componente de tarjetas de producto complejo y receptivo para plataformas de entretenimiento/medios, con un diseño orgánico/inspirado en la naturaleza que utiliza una paleta de colores bosque/verde. Incluye soporte para modo oscuro y elementos interactivos.

Abrir