Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de contenedor

Un componente contenedor de portafolio skeuomórfico con un tema oscuro y un diseño responsivo, que muestra trabajos y productos con elementos interactivos.

Abrir Vista previa

                <div class="bg-gray-800 p-5 rounded-lg shadow-lg dark:bg-gray-900 transition-all">
    <h2 class="text-3xl font-bold text-gray-200 dark:text-gray-100 mb-5">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 1</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of the project showcasing my skills and efforts on this particular piece.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 2</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of another project showcasing unique features and creative solutions.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 3</div>
                <p class="text-gray-300 dark:text-gray-400">Description of the project highlighting my contributions and outcomes of the work.</p>
            </div>
        </div>
    </div>
    <div class="mt-5 text-center">
        <h3 class="text-xl font-bold text-gray-200 dark:text-gray-100 mb-3">Contact Me</h3>
        <div class="flex justify-center space-x-4">
            <a href="#" class="flex items-center text-gray-300 dark:text-gray-400 hover:text-gray-200 dark:hover:text-gray-100">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="Avatar"> My Name
            </a>
        </div>
    </div>
</div>

Componente de gráficos de esqueuomorfismo

Un componente de gráficos responsivo con estilo Skeuomorphism, colores vibrantes y soporte de modo oscuro para interfaces de redes sociales.

Abrir Vista previa

                <div class="container mx-auto p-4 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Community Engagement</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Likes</h3>
                <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">12,345</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1M14 10V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1m0 9h.01"></path>
                    </svg>
                </div>
            </div>
            <div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Comments</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">5,678</div>
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55a1 1 0 01-1.415 0L9 16z"></path>
                    </svg>
                </div>
            </div>
             <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Shares</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">3,210</div>
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.693c-.095.327-.119.65-.073.973.059.416.213.808.46 1.141.28.353.603.676.968.968q.333.247.666.46a2.42 2.42 0 001.141.46c.323.046.646.022.973-.073l.447-.109a1.902 1.902 0 001.058-.582A1 1 0 0117 16v-4a1 1 0 011-1h2a1 1 0 011 1v-1a1 1 0 00-1-1h-3a1 1 0 01-1-1V9a1 1 0 00-1-1H9a1 1 0 00-1 1v4a1 1 0 01-1 1h-.086z"></path>
                    </svg>
                </div>
            </div>
             <div class="bg-gradient-to-br from-red-400 to-red-600 dark:from-red-600 dark:to-red-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Views</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">45,678</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Botones

Un componente de botones simple diseñado con Material Design, que utiliza un esquema de color monocromático y admite el modo oscuro, adecuado para sitios web comerciales / corporativos.

Abrir Vista previa

                <div class="flex flex-col items-center space-y-4 p-6 bg-gray-100 dark:bg-gray-800">
    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Buttons Component</h2>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Primary Button</button>
        <button class="px-6 py-2 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-800 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-white">Secondary Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">Tertiary Button</button>
        <button class="px-6 py-2 rounded bg-transparent border border-gray-300 text-gray-800 hover:bg-gray-300 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700">Outlined Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Large Button</button>
        <button class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Medium Button</button>
        <button class="px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Small Button</button>
    </div>
</div>

Componente de pie de página

Un componente de pie de página simple y receptivo con elementos de diseño 3D y tonos tierra, diseñado para un blog o sitio de contenido con soporte para temas oscuros.

Abrir Vista previa

                <footer class="bg-gray-300 dark:bg-gray-800 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-auto text-center md:text-left mb-4 md:mb-0">
        <p class="text-gray-700 dark:text-gray-300 text-sm">&copy; 2023 Your Blog Name. All rights reserved.</p>
      </div>
      <div class="w-full md:w-auto text-center md:text-right">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white mx-2 text-sm">Privacy Policy</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white mx-2 text-sm">Terms of Service</a>
      </div>
    </div>
  </div>
</footer>

Skeuomorphism Triadic Simple Portfolio Header Component

Abrir Vista previa

                <header class="bg-gradient-to-b from-gray-200 to-gray-400 via-gray-300 dark:from-gray-800 dark:to-gray-900 dark:via-gray-700 p-6 shadow-xl">
  <div class="container mx-auto flex justify-between items-center">
    </div>
</header>

Glassmorphism Sidebar Navigation

Una barra de navegación lateral de Glassmorphism compleja y receptiva para un tablero con un esquema de color complementario, compatibilidad con modo oscuro y sin JavaScript.

Abrir Vista previa

                <div class="flex h-screen bg-gray-200 dark:bg-gray-900">
    <!-- Sidebar -->
    <div class="flex flex-col w-64 bg-white dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-xl"
        style="backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.1);"
    >
        <div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700">
            <span class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</span>
        </div>
        <nav class="flex-1 px-2 py-4 space-y-2">
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9m2-13V9a1 1 0 011-1h2a1 1 0 011 1v3m-6 9l2-2m2 2l2-2"></path></svg>
                Home
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                Analytics
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7 5h2m-2 0h-2"></path></svg>
                Reports
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >

                <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                Settings
            </a>
        </nav>
        <div class="flex items-center justify-center h-16 border-t border-gray-300 dark:border-gray-700">
            <img
                class="w-10 h-10 rounded-full"
                src="https://randomuser.me/api/portraits/men/75.jpg"
                alt="Avatar"
            >
            <span class="ml-2 text-sm font-semibold text-gray-800 dark:text-white">John Doe</span>
        </div>
    </div>
    <!-- Content Area (can be added here) -->
</div>

Componente de contenedor 3D

Un componente contenedor receptivo para tableros con una combinación de colores vibrantes y elementos de diseño 3D, compatible con el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-white dark:bg-gray-900 flex flex-col justify-center items-center py-10">
    <div class="bg-gradient-to-r from-purple-400 to-pink-600 shadow-lg rounded-lg p-6 md:p-8 transform transition-all duration-300 hover:scale-105">
        <h2 class="text-white text-2xl font-bold text-center mb-4">Dashboard Overview</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">User Statistics</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=1" alt="Statistics Image">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Overview of user data and engagement metrics.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">Revenue Insights</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=2" alt="Revenue Image">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Detailed revenue analysis for the current period.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">User Profiles</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Brief information about some users.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">Latest Updates</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=3" alt="Updates Image">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Latest updates from the dashboard activities.</p>
            </div>
        </div>
        <button class="mt-4 bg-white dark:bg-gray-800 text-purple-600 dark:text-purple-400 font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300">View More Details</button>
    </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 CAPTCHA

Un componente CAPTCHA esqueuomórfico diseñado para interfaces de redes sociales con un esquema de color triádico, con múltiples elementos interactivos y soporte para temas oscuros.

Abrir Vista previa

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
    <h2 class="text-2xl font-bold text-white mb-4">Prove You're Not a Robot</h2>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md flex items-center space-x-4">
        <img src="https://picsum.photos/50/50" alt="Random Image" class="rounded-lg shadow-lg">
        <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-200 mb-2">Select all images containing:</p>
            <div class="grid grid-cols-2 gap-2">
                <img src="https://picsum.photos/100?random=1" alt="Image 1" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
                <img src="https://picsum.photos/100?random=2" alt="Image 2" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
                <img src="https://picsum.photos/100?random=3" alt="Image 3" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
                <img src="https://picsum.photos/100?random=4" alt="Image 4" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-full shadow-md hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
        Verify
    </button>
    <p class="mt-2 text-gray-400 dark:text-gray-500 text-sm">If you are having trouble, refresh the challenge.</p>
</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>

1 ... 128 129 130 131 132 ... 242

Categorías

Todos los componentes