Componentes Componentes de autenticación Componente de componentes de autenticación

Componente de componentes de autenticación

Un componente de autenticación receptivo diseñado para la interfaz de usuario del modo oscuro, con un formulario de inicio de sesión y registro con el estilo CSS de Tailwind.

Vista previa

Código HTML

<div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
  <div class="bg-gray-800 rounded-lg shadow-lg p-8 w-96">
    <h2 class="text-2xl font-bold mb-6 text-center">Welcome Back!</h2>
    <form>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="email">Email</label>
        <input type="email" id="email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="password">Password</label>
        <input type="password" id="password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
      </div>
      <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Login</button>
    </form>
    <div class="mt-4 text-center">
      <a href="#" class="text-sm text-indigo-400 hover:underline">Forgot your password?</a>
    </div>
    <div class="mt-6 border-t border-gray-600"></div>
    <h2 class="text-2xl font-bold mt-6 text-center">Create an Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="new-email">Email</label>
        <input type="email" id="new-email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="new-password">Password</label>
        <input type="password" id="new-password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="avatar">Upload Avatar</label>
        <input type="file" id="avatar" class="block w-full text-sm text-gray-500 bg-gray-600 rounded focus:outline-none" />
      </div>
      <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Sign Up</button>
    </form>
    <div class="mt-4 text-center">
      <small>Or sign up using</small>
      <div class="flex justify-center mt-2">
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
      </div>
    </div>
  </div>
</div>

Componentes relacionados

MinimalistAuthForm

Un componente de formulario de inicio de sesión minimalista y receptivo diseñado para carteras o aplicaciones web. Presenta una estética de diseño plano con una combinación de colores complementaria: el azul se usa para los elementos interactivos en el modo claro y el naranja se usa en el modo oscuro. El formulario incluye campos para correo electrónico y contraseña, una opción 'recordarme', un enlace 'olvidé mi contraseña', una opción para registrarse e integración de inicio de sesión social (por ejemplo, GitHub). Es compatible con el tema oscuro y está construido puramente con HTML y Tailwind CSS para una fácil integración.

Abrir