Fichas 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.

Abrir vista previa

                <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>

Componente Tarjetas de producto

Un componente simple de tarjeta de producto de comercio electrónico diseñado en estilo Material Design utilizando un esquema de color en escala de grises y un diseño receptivo con soporte para temas oscuros.

Abrir vista previa

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$99.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=2" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the second product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$89.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=3" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the third product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$79.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

Componente Tarjetas de producto

Un componente de tarjeta de producto receptivo con microinteracciones en tonos tierra, que proporciona soporte de tema oscuro para la exhibición de portafolios.

Abrir vista previa

                <div class="flex flex-wrap justify-center p-4">  
    <!-- Product Card -->  
    <div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">  
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">  
        <div class="p-4">  
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name</h2>  
            <p class="text-gray-600 dark:text-gray-300 mt-2">Brief description of the product that highlights its features and benefits.</p>  
            <div class="flex items-center mt-4">  
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">  
                <div class="ml-2">  
                    <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>  
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Designer</p>  
                </div>  
            </div>  
        </div>  
    </div>  

    <!-- Repeat for more products -->  
    <div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">  
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">  
        <div class="p-4">  
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name 2</h2>  
            <p class="text-gray-600 dark:text-gray-300 mt-2">Another product description highlighting its unique aspects.</p>  
            <div class="flex items-center mt-4">  
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">  
                <div class="ml-2">  
                    <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>  
                    <p class="text-gray-600 dark:text-gray-400 text-sm">Developer</p>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>

Componente Tarjetas de producto

Un componente de tarjeta de producto receptivo diseñado en un estilo minimalista con una combinación de colores pastel, adecuado para sitios web comerciales o corporativos, e incluye soporte para modo oscuro.

Abrir vista previa

                <div class="container mx-auto p-6">
    <h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-200">Product Cards</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/203" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Tarjetas de producto

Componente de tarjetas de producto skeuomórficas para tablero con diseño receptivo y soporte de tema oscuro.

Abrir vista previa

                <!-- Product Cards Component -->
<div class="p-10 dark:bg-gray-900">

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
        </div>
        <img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <p class="text-gray-700 dark:text-gray-400 text-base mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-green-600 dark:text-green-400">$199.99</span>
          <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
        </div>
        <img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <p class="text-gray-700 dark:text-gray-400 text-base mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-green-600 dark:text-green-400">$299.99</span>
          <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
        </div>
        <img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <p class="text-gray-700 dark:text-gray-400 text-base mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-green-600 dark:text-green-400">$399.99</span>
          <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
        </div>
      </div>
    </div>

  </div>

</div>

Componente Tarjetas de producto

Un componente de tarjeta de producto responsivo diseñado en estilo Material Design, con una combinación de colores en escala de grises. Incluye una imagen, un título, una descripción y un botón con soporte para el modo oscuro mediante Tailwind CSS.

Abrir vista previa

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
    <div class="p-4">
        <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
        <div class="mt-4">
            <a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
        </div>
    </div>
</div>

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/301" alt="Product Image">
    <div class="p-4">
        <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
        <div class="mt-4">
            <a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
        </div>
    </div>
</div>

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/302" alt="Product Image">
    <div class="p-4">
        <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
        <div class="mt-4">
            <a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
        </div>
    </div>
</div>

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
    <div class="flex items-center p-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div class="ml-3">
            <h3 class="text-gray-800 dark:text-gray-200 font-bold">User Name</h3>
            <p class="text-gray-600 dark:text-gray-400">Product Owner</p>
        </div>
    </div>
</div>

Ficha de producto Skeuomórfico

Un componente de tarjeta de producto skeuomórfico para un tablero, con estilo en escala de grises, complejidad media, responsivo con modo oscuro.

Abrir vista previa

                <div class="max-w-xs mx-auto bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
  <div class="relative">
    <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product image">
    <div class="absolute top-0 right-0 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-xs px-2 py-1 m-2 rounded-md">New</div>
  </div>
  <div class="p-4">
    <h3 class="text-gray-900 dark:text-white font-bold text-xl mb-2">Product Name</h3>
    <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features and benefits.</p>
    <div class="flex items-center justify-between">
      <span class="text-gray-900 dark:text-white font-bold text-lg">$199.99</span>
      <button class="bg-gray-600 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-500 text-white dark:text-gray-900 font-bold py-2 px-4 rounded-md">Add to Cart</button>
    </div>
  </div>
</div>

Componente Tarjetas de producto

Un componente de tarjetas de producto receptivo diseñado con elementos 3D y una combinación de colores vibrantes, que incorpora un tema oscuro para el blog y el consumo de contenido. Presenta una complejidad media con elementos interactivos para la participación del usuario.

Abrir vista previa

                <div class="flex flex-wrap justify-center space-x-4 space-y-4 p-6 bg-white dark:bg-gray-900">
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-red-400 to-orange-400 dark:from-red-600 dark:to-orange-600">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product Image">
    <div class="p-4">
      <h2 class="font-bold text-xl text-white dark:text-gray-200">Product Title</h2>
      <p class="text-gray-800 dark:text-gray-400">This is a brief description of the product that engages the reader's attention.</p>
      <div class="flex items-center space-x-2 mt-2">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">Author Name</span>
      </div>
    </div>
  </div>

  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-blue-400 to-purple-400 dark:from-blue-600 dark:to-purple-600">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product Image">
    <div class="p-4">
      <h2 class="font-bold text-xl text-white dark:text-gray-200">Another Product Title</h2>
      <p class="text-gray-800 dark:text-gray-400">This product offers great features and has received positive feedback from users.</p>
      <div class="flex items-center space-x-2 mt-2">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">Author Name</span>
      </div>
    </div>
  </div>

  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-green-400 to-teal-400 dark:from-green-600 dark:to-teal-600">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product Image">
    <div class="p-4">
      <h2 class="font-bold text-xl text-white dark:text-gray-200">Exciting New Product</h2>
      <p class="text-gray-800 dark:text-gray-400">Discover the amazing capabilities of this product that make your life easier.</p>
      <div class="flex items-center space-x-2 mt-2">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">Author Name</span>
      </div>
    </div>
  </div>
</div>

Componente Tarjetas de producto

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

Abrir vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-lg">
      <img class="w-full h-48 object-cover transition duration-500 ease-in-out transform hover:scale-110" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features.</p>
        <div class="flex items-center justify-between">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$19.99</span>
          <button class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-lg">
      <img class="w-full h-48 object-cover transition duration-500 ease-in-out transform hover:scale-110" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features.</p>
        <div class="flex items-center justify-between">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
          <button class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

        <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-lg">
      <img class="w-full h-48 object-cover transition duration-500 ease-in-out transform hover:scale-110" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features.</p>
        <div class="flex items-center justify-between">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$39.99</span>
          <button class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

Componente Tarjetas de producto

Componente de tarjeta de producto con estilo brutalista, combinación de colores monocromática, nivel de complejidad complejo para fines de comercio electrónico.

Abrir vista previa

                <div class="dark:bg-stone-900 bg-stone-100 p-6">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Product Card 1 -->
    <div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
      <div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
        <div>
          <h3 class="text-2xl font-bold mb-2 uppercase">Product Title 1</h3>
          <p class="text-sm mb-4">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 mb-4">
            <span class="text-xl font-bold mr-2">$49.99</span>
            <span class="text-sm line-through dark:text-stone-400 text-stone-500">$59.99</span>
          </div>
        </div>
        <div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
      <div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
        <div>
          <h3 class="text-2xl font-bold mb-2 uppercase">Product Title 2</h3>
          <p class="text-sm mb-4">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 mb-4">
            <span class="text-xl font-bold mr-2">$75.00</span>
            <span class="text-sm line-through dark:text-stone-400 text-stone-500">$90.00</span>
          </div>
        </div>
        <div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
      <div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
        <div>
          <h3 class="text-2xl font-bold mb-2 uppercase">Product Title 3</h3>
          <p class="text-sm mb-4">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 mb-4">
            <span class="text-xl font-bold mr-2">$120.00</span>
            <span class="text-sm line-through dark:text-stone-400 text-stone-500">$150.00</span>
          </div>
        </div>
        <div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
          <button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
        </div>
      </div>
    </div>

  </div>
</div>

Categorías