Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente Visor de archivos

Un componente de visor de archivos responsivo diseñado con los principios de Material Design, con soporte para modo oscuro y efectos responsivos.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Document Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: PDF</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 1.2 MB</p>
            </div>
        </div>
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50/?random=1" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Image Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: JPEG</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 3.4 MB</p>
            </div>
        </div>
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50/?random=2" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Video Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: MP4</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 20 MB</p>
            </div>
        </div>
    </div>
</div>

<!-- Dark Mode CSS -->
<style>
    /* Example dark mode CSS */
    body {
        background-color: #121212;
        color: #ffffff;
    }
</style>

Componente de mapa del sitio

Un componente de mapa del sitio interactivo diseñado con los principios de Material Design, con diseños basados en cuadrícula, sombras y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-gray-700 transition duration-300">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Home</h3>
            <p class="text-gray-600 dark:text-gray-400">Welcome to our website!</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="mt-2 rounded-md">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">About Us</h3>
            <p class="text-gray-600 dark:text-gray-400">Learn more about our team.</p>
            <img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="mt-2 rounded-md">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Services</h3>
            <p class="text-gray-600 dark:text-gray-400">What we offer to our clients.</p>
            <img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="mt-2 rounded-md">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact</h3>
            <p class="text-gray-600 dark:text-gray-400">Reach out to us anytime.</p>
            <img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="mt-2 rounded-md">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Blog</h3>
            <p class="text-gray-600 dark:text-gray-400">Read our latest articles.</p>
            <img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="mt-2 rounded-md">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">FAQ</h3>
            <p class="text-gray-600 dark:text-gray-400">Find answers to your questions.</p>
            <img src="https://picsum.photos/200/100?random=6" alt="FAQ Image" class="mt-2 rounded-md">
        </div>
    </div>
</div>

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.

Abrir Vista previa

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

Componente de formularios

Un componente de formularios responsivo diseñado en el estilo Material Design utilizando Tailwind CSS, con diseños de cuadrícula, sombras y soporte para el modo oscuro.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Us</h2>
    <form>
        <div class="grid grid-cols-1 gap-4">
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
                <input type="text" id="name" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Name">
            </div>
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Email">
            </div>
            <div>
                <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
                <textarea id="message" rows="4" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Message"></textarea>
            </div>
            <div class="flex items-center">
                <input type="checkbox" id="subscribe" class="mr-2 leading-tight">
                <label for="subscribe" class="text-sm text-gray-600 dark:text-gray-400">Subscribe to our newsletter</label>
            </div>
            <button type="submit" class="w-full mt-4 bg-indigo-600 text-white py-2 rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 dark:focus:ring-indigo-400">Submit</button>
        </div>
    </form>
    <div class="mt-6 flex justify-center">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md">
    </div>
    <div class="mt-4 flex justify-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg">
    </div>
</div>

Componente Perfiles de usuario

Un componente de perfiles de usuario responsivo con un estilo de diseño glassmorphism, con soporte para temas oscuros y uso de Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full">
    <div class="flex flex-col items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
      <ul class="mt-4 space-y-2 text-center">
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> New York, USA</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> January 1, 1990</li>
      </ul>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full mt-6">
    <div class="flex flex-col items-center">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
      <p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
      <ul class="mt-4 space-y-2 text-center">
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> London, UK</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> March 5, 1992</li>
      </ul>
    </div>
  </div>
</div>
<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Componente de galería

Un componente de galería responsivo con un estilo de diseño 3D, que presenta profundidad y compromiso a través de efectos de sombra y desplazamiento. Admite temas oscuros y claros.

Abrir Vista previa

                <div class="max-w-7xl mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Gallery Item 1" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 1</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Gallery Item 2" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 2</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Gallery Item 3" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 3</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=4" alt="Gallery Item 4" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 4</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=5" alt="Gallery Item 5" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 5</span>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=6" alt="Gallery Item 6" class="w-full h-auto rounded-lg" />
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-0 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span class="text-white font-semibold text-lg">Gallery Item 6</span>
            </div>
        </div>
    </div>
</div>
<style>
    .dark { background-color: #1a202c; }
    .dark .text-gray-900 { color: white; }
</style>

Componente de inicio de sesión/registro

Un componente de inicio de sesión / registro de diseño minimalista y plano con efectos responsivos y soporte para temas oscuros, utilizando Tailwind CSS.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Welcome</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
                <input type="text" id="username" class="border border-gray-300 dark:border-gray-700 rounded-lg w-full py-2 px-3 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Enter your username" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="border border-gray-300 dark:border-gray-700 rounded-lg w-full py-2 px-3 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Enter your password" required>
            </div>
            <div class="mb-6">
                <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg">Login</button>
            </div>
            <div class="text-center mb-4">
                <span class="text-gray-600 dark:text-gray-400">Or</span>
            </div>
            <div class="mb-6">
                <button type="button" class="w-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold py-2 rounded-lg">Signup</button>
            </div>
            <div class="text-center">
                <img class="rounded-full w-16 h-16 mx-auto" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </div>
            <p class="text-center text-gray-500 dark:text-gray-400 mt-4">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
        </form>
    </div>
</div>
<style>
@media (prefers-color-scheme: dark) {
    input:focus {
        background-color: #4A5568;
    }
    button {
        transition: background-color 0.3s;
    }
}
</style>

Componente de cargadores

Un componente de cargadores diseñado en el estilo Material Design, con efectos responsivos y soporte para temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader-container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-blue-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-green-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-red-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-yellow-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-purple-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-pink-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
    </div>
</div>

Componentes funcionales

Un componente funcional con diseño esqueuomórfico, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-lg mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full w-12 h-12 border-4 border-white dark:border-gray-900 shadow-md">
        <h2 class="ml-4 text-xl font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-inner">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">About</h3>
        <p class="text-gray-600 dark:text-gray-400">
            A brief description of the user or content, styled in a way that mimics a card.
        </p>
    </div>
    <div class="mt-4">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Photos</h3>
        <div class="grid grid-cols-2 gap-2 mt-2">
            <img src="https://picsum.photos/200?random=1" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200?random=2" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200?random=3" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200?random=4" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
        </div>
    </div>
</div>

Componente de cargadores

Un componente de cargadores diseñado en 3D que muestra animaciones de carga con profundidad y compromiso, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Loading...</h2>
    <div class="flex space-x-4">
        <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
        <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
        <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
    </div>
    <div class="mt-8 flex flex-col items-center">
        <img src="https://picsum.photos/100/100?random=1" alt="Loading Image" class="rounded-full border-4 border-white dark:border-gray-800 shadow-lg">
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading user profile...</p>
    </div>
</div>

1 ... 232 233 234 235 236 ... 242

Categorías

Todos los componentes