Todos los componentes

Componente de notificaciones del sistema

Un componente de notificaciones del sistema diseñado con el estilo Glassmorphism, con efectos responsivos y compatibilidad con temas oscuros. Utiliza Tailwind CSS para el estilo, junto con imágenes de marcador de posición de picsum.photos para las imágenes y randomuser.me para los avatares.

Abrir vista previa

                <div class="fixed bottom-5 right-5 space-y-3">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Notification Title</p>
                <p class="text-white text-sm">This is a toast notification message to inform you about something important.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Another Notification</p>
                <p class="text-white text-sm">This is another toast notification message for your consideration.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Dismiss</button>
        </div>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .text-white {
        color: white;
    }
    .border-white {
        border-color: rgba(255, 255, 255, 0.3);
    }
}
</style>

Componente Perfiles de usuario

Componente de perfiles de usuario con diseño de neumorfismo, efectos responsivos y compatibilidad con temas oscuros.

Abrir vista previa

                <div class="flex flex-wrap items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-10">

  <!-- User Profile Card -->
  <div class="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 m-4 neumorphism-light dark:neumorphism-dark">
    <div class="flex justify-center">
      <img class="w-32 h-32 rounded-full shadow-md border-4 border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/women/79.jpg" alt="Profile Picture">
    </div>
    <div class="mt-5 text-center">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
      <p class="text-gray-600 dark:text-gray-400 mt-1">Software Engineer</p>
      <p class="text-gray-500 dark:text-gray-500 text-sm mt-2">Passionate about creating beautiful and functional web applications.</p>
    </div>
    <div class="flex justify-center mt-5">
      <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 mx-3">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="text-blue-700 hover:text-blue-900 dark:text-blue-600 dark:hover:text-blue-800 mx-3">
        <i class="fab fa-linkedin-in"></i>
      </a>
      <a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 mx-3">
        <i class="fab fa-github"></i>
      </a>
    </div>
  </div>

  <!-- Another User Profile Card -->
  <div class="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 m-4 neumorphism-light dark:neumorphism-dark">
    <div class="flex justify-center">
      <img class="w-32 h-32 rounded-full shadow-md border-4 border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/80.jpg" alt="Profile Picture">
    </div>
    <div class="mt-5 text-center">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Smith</h2>
      <p class="text-gray-600 dark:text-gray-400 mt-1">UX Designer</p>
      <p class="text-gray-500 dark:text-gray-500 text-sm mt-2">Focused on creating intuitive and enjoyable user experiences.</p>
    </div>
    <div class="flex justify-center mt-5">
      <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 mx-3">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="text-blue-700 hover:text-blue-900 dark:text-blue-600 dark:hover:text-blue-800 mx-3">
        <i class="fab fa-linkedin-in"></i>
      </a>
      <a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 mx-3">
        <i class="fab fa-github"></i>
      </a>
    </div>
  </div>

  <!-- Add more profile cards as needed -->

</div>

<style>
.neumorphism-light {
  box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
}

.dark .neumorphism-dark {
  box-shadow: 7px 7px 15px #1c1c1c, -7px -7px 15px #2e2e2e;
}
</style>

Componente del reproductor de audio

Un componente de reproductor de audio sensible diseñado con el estilo Glassmorphism, con un aspecto similar al vidrio esmerilado y soporte para el modo oscuro.

Abrir vista previa

                <div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
        <img src="https://picsum.photos/200/100" alt="Album Art" class="rounded-lg mb-4">
        <div class="flex flex-col items-center">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Song Title</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
        </div>
        <div class="w-full my-4">
            <input type="range" class="w-full h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer dark:bg-gray-600" min="0" max="100" value="50">
        </div>
        <div class="flex justify-between">
            <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Play</button>
            <button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Stop</button>
        </div>
    </div>
</div>

Componente Mapas

Un componente de mapas responsivo con elementos de diseño 3D y soporte de temas oscuros usando Tailwind CSS.

Abrir vista previa

                <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
    <div class="max-w-6xl w-full mx-auto sm:px-6 lg:px-8">
        <div class="mt-8 overflow-hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 items-center bg-white dark:bg-gray-800 overflow-hidden shadow transform transition-all duration-300 perspective-1000">
                <div class="p-6">
                    <div class="flex items-center">
                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500 dark:text-gray-400"><path d="M12 12l-2 10l-4 -14l9 -4 4 10L20 12 12 12z"></path></svg>
                        <div class="ml-4 text-lg leading-7 font-semibold"><a href="#" class="underline text-gray-900 dark:text-white">Interactive Map</a></div>
                    </div>

                    <div class="ml-12">
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            Explore locations with our interactive 3D map. Discover new places and get directions easily.
                        </div>
                    </div>
                </div>

                <div class="relative w-full h-64 md:h-auto" style="transform: translateZ(20px);">
                     <img src="https://picsum.photos/seed/map-placeholder/600/400" alt="Map Placeholder" class="absolute inset-0 w-full h-full object-cover">
                </div>
            </div>
        </div>
    </div>
</div>

Componente de incrustación de medios

Un componente de incrustación de medios responsivo con elementos de diseño 3D y soporte de temas oscuros mediante Tailwind CSS.

Abrir vista previa

                <div class="relative isolate overflow-hidden bg-gradient-to-br from-gray-900 to-black py-16 sm:py-24 lg:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl lg:mx-0">
      <h2 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">Interactive Media</h2>
      <p class="mt-6 text-lg leading-8 text-gray-300">Experience media in a new dimension with our captivating 3D design.</p>
    </div>
    <div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-14 lg:mx-0 lg:max-w-none lg:grid-cols-3">
      <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
        <img src="https://picsum.photos/seed/media1/500/300" alt="Placeholder image for media content 1" class="absolute inset-0 -z-10 h-full w-full object-cover">
        <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
        <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>

        <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
          <time datetime="2023-01-23" class="-m-1.5">
            <div class="flex items-center gap-x-4">
                <img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
                <div class="text-sm leading-6">
                  <p class="font-semibold text-gray-300">
                    <a href="#">
                      <span class="absolute inset-0"></span>
                      John Doe
                    </a>
                  </p>
                  <p class="text-gray-400">Co-Founder / CTO</p>
                </div>
              </div>
          </time>
        </div>
        <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
          <a href="#">
            <span class="absolute inset-0"></span>
            Exploring the Depths
          </a>
        </h3>
      </article>

      <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
        <img src="https://picsum.photos/seed/media2/500/300" alt="Placeholder image for media content 2" class="absolute inset-0 -z-10 h-full w-full object-cover">
        <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
        <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>

        <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
          <time datetime="2023-01-23" class="-m-1.5">
              <div class="flex items-center gap-x-4">
                  <img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
                  <div class="text-sm leading-6">
                    <p class="font-semibold text-gray-300">
                      <a href="#">
                        <span class="absolute inset-0"></span>
                        Jane Smith
                      </a>
                    </p>
                    <p class="text-gray-400">Lead Designer</p>
                  </div>
                </div>
            </time>
        </div>
        <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
          <a href="#">
            <span class="absolute inset-0"></span>
            The Future of Interaction
          </a>
        </h3>
      </article>

      <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
        <img src="https://picsum.photos/seed/media3/500/300" alt="Placeholder image for media content 3" class="absolute inset-0 -z-10 h-full w-full object-cover">
        <div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
        <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>

        <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
          <time datetime="2023-01-23" class="-m-1.5">
              <div class="flex items-center gap-x-4">
                  <img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
                  <div class="text-sm leading-6">
                    <p class="font-semibold text-gray-300">
                      <a href="#">
                        <span class="absolute inset-0"></span>
                        Peter Jones
                      </a>
                    </p>
                    <p class="text-gray-400">Marketing Manager</p>
                  </div>
                </div>
            </time>
        </div>
        <h3 class="mt-3 text-lg font-semibold leading-6 text-white">
          <a href="#">
            <span class="absolute inset-0"></span>
            Bringing Ideas to Life
          </a>
        </h3>
      </article>
    </div>
  </div>
</div>

Componente de visualización de contenido

Un componente de pantalla nostálgico con diseño retro, con efectos responsivos y soporte para temas oscuros.

Abrir vista previa

                <div class="max-w-xs mx-auto bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:border-gray-700">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Nostalgic Image">
    <div class="p-4">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
            <div class="ml-3">
                <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Retro Nostalgia</h2>
                <p class="text-gray-600 dark:text-gray-400">Explore the vibrant designs of the 80s and 90s that inspired our modern aesthetics.</p>
            </div>
        </div>
        <div class="mt-4">
            <h3 class="text-md font-semibold text-gray-700 dark:text-gray-300">Join the Movement</h3>
            <p class="text-gray-500 dark:text-gray-400">Be part of our journey as we explore retro designs, culture, and style.
            </p>
        </div>
        <div class="flex justify-between mt-4">
            <span class="text-gray-600 dark:text-gray-400">#Retro #Vintage</span>
            <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Learn More</button>
        </div>
    </div>
</div>

Componente de Mega Menú Minimalista

Componente de Mega Menú Minimalista con efectos responsivos y soporte de temas oscuros, sin JavaScript.

Abrir vista previa

                <nav class="bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-6 py-3">
    <div class="flex justify-between items-center">
      <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Logo</a>
      <div class="hidden lg:flex lg:items-center">
        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2">Home</a>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2 focus:outline-none">Products</button>
          <div class="absolute left-0 mt-0 w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 1</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 2</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 3</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2 focus:outline-none">Services</button>
          <div class="absolute left-0 mt-0 w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 1</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 2</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 3</a>
          </div>
        </div>
        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2">Contact</a>
      </div>
      <button class="lg:hidden text-gray-800 dark:text-white focus:outline-none">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
    <div class="lg:hidden mt-3">
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Home</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Products</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Services</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Contact</a>
    </div>
  </div>
</nav>

Componente de autenticación de dos factores

Componente de autenticación de dos factores retro / vintage con diseño receptivo y soporte de modo oscuro.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-200 via-gray-400 to-gray-600 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8">
    <div class="absolute top-0 left-0 w-full h-full border-4 border-black dark:border-gray-500 rounded-lg pointer-events-none"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-6 font-mono">Authenticate</h2>
      <div class="space-y-6">
        <div>
          <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 font-mono">Enter 2FA Code</label>
          <div class="mt-1">
            <input type="text" name="code" id="code" class="block w-full px-4 py-3 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:focus:border-indigo-600 dark:focus:ring-indigo-600 font-mono tracking-widest" placeholder="••••••">
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:focus:ring-indigo-600 font-mono">
            Verify Code
          </button>
        </div>
      </div>
      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400 font-mono">
          Need help? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Resend Code</a>
        </p>
      </div>
    </div>
  </div>
</div>

Visor retro 360

Componente de visor retro de 360° con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS. Utiliza imágenes de marcador de posición de picsum.photos.

Abrir vista previa

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg">
  <div class="relative" style="padding-top: 56.25%;">
    <img src="https://picsum.photos/600/400" alt="360 degree view" class="absolute top-0 left-0 w-full h-full object-cover rounded-lg">
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-2 px-4 rounded-full text-sm font-bold">
        Retro 360° Viewer
      </div>
    </div>
  </div>
  <div class="flex justify-center space-x-4 mt-4">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-xs">
      &lt; Previous
    </button>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-xs">
      Next &gt;
    </button>
  </div>
</div>

Componentes de autenticación

Un componente de autenticación minimalista con un formulario de inicio de sesión y registro con soporte para temas oscuros, diseño receptivo e imágenes de marcador de posición.

Abrir vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 w-full max-w-sm">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Welcome Back!</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please login to your account</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" name="email" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-150">Login</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a></p>
    </div>
 </div>

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 w-full max-w-sm mt-8">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Create Account</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Join us today</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="username">Username</label>
                <input type="text" id="username" name="username" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" name="email" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-150">Sign Up</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login</a></p>
    </div>
</div>

Categorías