Componentes de búsqueda

Categorías

Componentes Fichas de producto

Fichas de producto

Visualización de la información del producto en formato de tarjeta

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>

Componente Tarjetas de producto

Un componente de tarjeta de producto receptivo diseñado para el modo oscuro, con colores vibrantes y múltiples elementos interactivos adecuados para blogs y consumo de contenido.

Abrir Vista previa

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
  <div class="flex items-center mb-4">
    <img src="https://picsum.photos/id/100/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
    <div class="ml-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
      <p class="text-gray-400 text-sm">By: Author Name</p>
    </div>
  </div>
  <p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
  <div class="flex justify-between items-center">
    <span class="text-lg text-vibrant-orange-500 font-semibold">$99.99</span>
    <button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
  </div>
  <div class="mt-4">
    <button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
  </div>
</div>

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg mt-4">
  <h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
  <div class="flex items-center mb-4">
    <img src="https://picsum.photos/id/101/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
    <div class="ml-4">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
      <p class="text-gray-400 text-sm">By: Author Name</p>
    </div>
  </div>
  <p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
  <div class="flex justify-between items-center">
    <span class="text-lg text-vibrant-orange-500 font-semibold">$79.99</span>
    <button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
  </div>
  <div class="mt-4">
    <button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
  </div>
</div>

Componente Tarjetas de producto

Un componente de tarjetas de producto receptivo diseñado con estilo de skeuomorfismo, combinación de colores de tonos tierra y compatibilidad con temas oscuros. Ideal para cuadros de mando.

Abrir Vista previa

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <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-gray-200">User Name</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
</div>

Componente Tarjetas de producto

Un componente de tarjeta de producto simple y receptivo con microinteracciones, diseñado para interfaces de redes sociales que usan Tailwind CSS, compatible con tema oscuro y esquema de color en escala de grises.

Abrir Vista previa

                <div class="flex flex-col max-w-xs mx-auto rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white transition-colors duration-300">Product Title</h2>
        <p class="mt-1 text-gray-600 dark:text-gray-300 transition-colors duration-300">Brief description of the product. Engaging text to attract users.</p>
        <div class="flex items-center mt-3">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <span class="ml-2 text-gray-700 dark:text-gray-200 transition-colors duration-300">User Name</span>
        </div>
    </div>
</div>
<div class="mt-4">
    <button class="w-full py-2 px-4 bg-gray-800 text-white rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500 transition-colors duration-300">Add to Cart</button>
</div>

Componente Tarjetas de producto

Un componente de tarjetas de producto receptivo con microinteracciones, que utiliza un esquema de color en escala de grises y admite el modo oscuro. Ideal para fines de blog o consumo de contenido.

Abrir Vista previa

                <div class="flex flex-wrap justify-center p-4">
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
    <div class="w-80 m-4 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">
        <div class="bg-white dark:bg-gray-800 p-4">
            <h2 class="text-gray-800 dark:text-white font-semibold text-xl mb-2">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of the product goes here. It's engaging and informative.</p>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
                <div class="text-gray-800 dark:text-white">
                    <p class="text-sm font-medium">Author Name</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Posted on January 1, 2023</p>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Tarjetas de producto

Un componente complejo de la tarjeta de producto con microinteracciones atractivas y una combinación de colores monocromática. Diseñado para sitios web comerciales, es responsivo y admite el modo oscuro.

Abrir Vista previa

                <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 p-6">
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$99.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$89.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$79.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
</div>

Componente Tarjetas de producto

Un componente de tarjeta de producto receptivo con diseño 3D, combinación de colores análoga y compatibilidad con modo oscuro, diseñado para interfaces de redes sociales.

Abrir Vista previa

                <div class="max-w-sm mx-auto relative z-10 transform transition-transform duration-500 ease-in-out hover:scale-105">
  <div class="bg-gradient-to-br from-teal-400 via-blue-500 to-purple-600 dark:from-gray-700 dark:via-gray-800 dark:to-black shadow-xl rounded-lg overflow-hidden dark:shadow-lg">
    <div class="relative h-48">
      <img class="w-full h-full object-cover" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image">
      <div class="absolute top-0 right-0 bg-blue-600 text-white px-3 py-1 m-2 rounded-lg text-sm font-bold dark:bg-blue-400">New</div>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Awesome Product Title</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mt-1">This is a short description of the product, highlighting its key features and benefits.</p>
      <div class="flex items-center mt-4">
        <div class="text-xl font-bold text-blue-600 dark:text-blue-400">$99.99</div>
        <button class="ml-auto bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
      </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <span class="text-sm text-gray-700 dark:text-gray-400">Posted by John Doe</span>
      </div>
    </div>
  </div>
</div>

<style>
  /* Basic 3D effect. More advanced 3D requires transforms on hover/active states combined with perspective on parent. */
  .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .dark\:shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
</style>

Componente Tarjetas de producto

Un componente de tarjetas de producto responsivo diseñado utilizando los principios de Material Design con Tailwind CSS. Es compatible con el modo oscuro y presenta sombras y diseños basados en cuadrículas.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Product Cards</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150?random=1" alt="Product Image" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
                <p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150?random=2" alt="Product Image" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h3>
                <p class="text-gray-600 dark:text-gray-400">$39.99</p>
                <p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150?random=3" alt="Product Image" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 3</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
                <p class="text-gray-700 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
            </div>
        </div>
    </div>
</div>