Componentes de búsqueda

Categorías

Componentes Iniciar sesión/Registrarse

Iniciar sesión/Registrarse

Componentes de acceso a la cuenta de usuario

Monospace_Dating_Login_Signup_Component

Un componente de inicio de sesión/registro simple y receptivo para plataformas de citas/sociales con un diseño monoespaciado inspirado en el código. Cuenta con monocromo en blanco y negro con un color de acento brillante y soporte completo para el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border-2 border-gray-900 dark:border-gray-100 font-mono">
    <div class="bg-gray-900 dark:bg-gray-100 text-green-400 dark:text-gray-900 p-3 flex items-center justify-between text-sm">
      <span class="flex items-center">
        <span class="h-2 w-2 rounded-full bg-red-500 mr-1"></span>
        <span class="h-2 w-2 rounded-full bg-yellow-500 mr-1"></span>
        <span class="h-2 w-2 rounded-full bg-green-500"></span>
      </span>
      <span class="terminal-title">_date_terminal.sh</span>
      <span></span>
    </div>
    <div class="p-6 lg:p-8">
      <h2 class="text-2xl lg:text-3xl font-bold mb-6 text-center text-gray-900 dark:text-gray-100">
        <span class="text-green-500 dark:text-pink-500">_</span>CONNECT
      </h2>

      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">
          username:
        </label>
        <input type="text" id="username" placeholder="_your_handle_here" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 focus:border-green-500 dark:focus:border-pink-500 transition-colors duration-200">
      </div>

      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">
          password:
        </label>
        <input type="password" id="password" placeholder="_secret_chars_" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 focus:border-green-500 dark:focus:border-pink-500 transition-colors duration-200">
      </div>

      <div class="flex flex-col space-y-3">
        <button type="button" class="bg-green-500 hover:bg-green-600 dark:bg-pink-500 dark:hover:bg-pink-600 text-white dark:text-gray-900 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors duration-200 text-lg">
          LOGIN_()
        </button>
        <button type="button" class="bg-gray-700 hover:bg-gray-900 dark:bg-gray-200 dark:hover:bg-gray-50 text-white dark:text-gray-900 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors duration-200 text-lg">
          SIGNUP_()
        </button>
      </div>

      <div class="mt-6 text-center text-sm">
        <a href="#" class="inline-block align-baseline font-bold text-green-500 hover:text-green-800 dark:text-pink-500 dark:hover:text-pink-800 transition-colors duration-200">
          _FORGOT_PW?
        </a>
      </div>
    </div>
  </div>
</div>

Componente de inicio de sesión/registro

Un componente de inicio de sesión/registro simple y receptivo con una estética de Material Design, una combinación de colores análoga y compatibilidad con el modo oscuro, creado con Tailwind CSS para una cartera.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md max-w-sm w-full">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Welcome Back!</h2>

    <ul class="flex justify-center mb-6">
      <li class="mr-4">
        <a href="#" class="text-blue-500 dark:text-blue-400 border-b-2 border-blue-500 dark:border-blue-400 pb-1">Login</a>
      </li>
      <li>
        <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 pb-1">Sign Up</a>
      </li>
    </ul>

    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600" placeholder="[email protected]">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600" placeholder="********">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-800">
          Sign In
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600" href="#">
          Forgot Password?
        </a>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-gray-600 dark:text-gray-400 text-sm">Or sign in with:</p>
      <div class="flex justify-center space-x-4 mt-2">
        <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline dark:bg-red-600 dark:hover:bg-red-800">
          Google
        </button>
        <button class="bg-blue-800 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline dark:bg-blue-700 dark:hover:bg-blue-900">
          Facebook
        </button>
      </div>
    </div>
  </div>
</div>

Componente de inicio de sesión/registro brutalista

Componente brutalista de inicio de sesión / registro para sitios web de blogs / contenido con esquema de color en escala de grises.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 p-8 rounded-none shadow-none border-4 border-black dark:border-white w-full max-w-md mx-4">
        <div class="mb-8">
            <h2 class="text-3xl font-bold text-black dark:text-white mb-2">Login</h2>
            <p class="text-gray-700 dark:text-gray-300">Access your brutalist blog experience.</p>
        </div>
        <form>
            <div class="mb-4">
                <label for="username" class="sr-only">Username</label>
                <input type="text" id="username" placeholder="USERNAME" class="w-full p-3 border-2 border-black dark:border-white bg-gray-200 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white text-lg">
            </div>
            <div class="mb-6">
                <label for="password" class="sr-only">Password</label>
                <input type="password" id="password" placeholder="PASSWORD" class="w-full p-3 border-2 border-black dark:border-white bg-gray-200 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white text-lg">
            </div>
            <button type="submit" class="w-full bg-black dark:bg-white text-white dark:text-black P-3 border-2 border-black dark:border-white uppercase font-bold text-lg hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-300">
                LOGIN
            </button>
        </form>
        <div class="mt-8 text-center">
            <a href="#" class="text-black dark:text-white hover:underline font-bold">CREATE ACCOUNT</a>
        </div>
    </div>
</div>

Componente de inicio de sesión/registro

Un componente de inicio de sesión / registro receptivo para comercio electrónico con microinteracciones, combinación de colores análoga y soporte para temas oscuros, construido con Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full relative overflow-hidden">
    
    <!-- Analogous Color Scheme Elements (example: blues and greens) -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-blue-200 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
    <div class="absolute top-0 right-0 w-24 h-24 bg-green-200 dark:bg-green-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
    <div class="absolute -bottom-8 left-20 w-24 h-24 bg-teal-200 dark:bg-teal-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>

    <div class="relative z-10">
      <div class="flex justify-center mb-6">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white" id="form-title">Login</h2>
      </div>

      <!-- Login Form -->
      <form id="login-form">
        <div class="mb-4">
          <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
          <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="[email protected]">
        </div>
        <div class="mb-6">
          <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
          <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="********">
        </div>
        <div class="flex items-center justify-between mb-6">
          <input type="submit" value="Login" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full transition duration-300 ease-in-out transform hover:scale-105 active:scale-95">
        </div>
        <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
          Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600 font-bold transition duration-300 ease-in-out opacity-75 hover:opacity-100" id="signup-link">Sign up</a>
        </p>
      </form>

      <!-- Signup Form (hidden by default) -->
      <form id="signup-form" class="hidden">
        <div class="mb-4">
          <label for="signup-name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Name</label>
          <input type="text" id="signup-name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="John Doe">
        </div>
        <div class="mb-4">
          <label for="signup-email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
          <input type="email" id="signup-email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="[email protected]">
        </div>
        <div class="mb-6">
          <label for="signup-password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
          <input type="password" id="signup-password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="********">
        </div>
        <div class="flex items-center justify-between mb-6">
          <input type="submit" value="Sign Up" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full transition duration-300 ease-in-out transform hover:scale-105 active:scale-95">
        </div>
        <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
          Already have an account? <a href="#" class="text-green-500 hover:text-green-800 dark:text-green-400 dark:hover:text-green-600 font-bold transition duration-300 ease-in-out opacity-75 hover:opacity-100" id="login-link">Login</a>
        </p>
      </form>
    </div>
  </div>
</div>

<!-- Just a little bit of inline CSS for the blob animation - usually this would be in a CSS file -->
<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

<script>
  // This script is for toggling between login and signup forms
  // In a real application, this would be handled by a JavaScript framework or library
  const loginForm = document.getElementById('login-form');
  const signupForm = document.getElementById('signup-form');
  const loginLink = document.getElementById('login-link');
  const signupLink = document.getElementById('signup-link');
  const formTitle = document.getElementById('form-title');

  signupLink.addEventListener('click', (e) => {
    e.preventDefault();
    loginForm.classList.add('hidden');
    signupForm.classList.remove('hidden');
    formTitle.textContent = 'Sign Up';
  });

  loginLink.addEventListener('click', (e) => {
    e.preventDefault();
    signupForm.classList.add('hidden');
    loginForm.classList.remove('hidden');
    formTitle.textContent = 'Login';
  });
</script>

Componente de inicio de sesión/registro

Un componente complejo de inicio de sesión/registro diseñado con un estilo esqueuomórfico, que utiliza un esquema de color en escala de grises para una interfaz de panel. Incluye varios elementos interactivos y es responsivo con soporte para temas oscuros.

Abrir Vista previa

                <div class="min-h-screen bg-white dark:bg-gray-800 flex items-center justify-center">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">Login / Signup</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="username">Username</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
            </div>
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center">
                    <input type="checkbox" class="mr-2 leading-tight" id="remember">
                    <label class="text-gray-600 dark:text-gray-300" for="remember">Remember me</label>
                </div>
                <a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800" href="#">Forgot Password?</a>
            </div>
            <div class="flex flex-col">
                <button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mb-4" type="submit">Login</button>
                <button class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Signup</button>
            </div>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Or sign in with</p>
            <div class="flex justify-center space-x-4 mt-2">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic1/40/40" alt="Avatar">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic2/40/40" alt="Avatar">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic3/40/40" alt="Avatar">
            </div>
        </div>
    </div>
</div>

LoginSignupComponent

Un componente receptivo de inicio de sesión / registro diseñado con estilo Neumorphism y combinación de colores pastel para interfaces de redes sociales.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-800 p-6">
  <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-lg p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Join Us</h2>
    <form>
      <div class="mb-4">
        <input type="text" placeholder="Username" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <div class="mb-6">
        <input type="email" placeholder="Email Address" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <div class="mb-6">
        <input type="password" placeholder="Password" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white rounded-md p-4 hover:bg-blue-600 shadow-xl transition duration-200">Sign Up</button>
    </form>
    <div class="text-center mt-4">
      <span class="text-gray-600 dark:text-gray-400">or</span>
    </div>
    <button class="w-full mt-4 bg-gray-200 rounded-md p-4 flex items-center justify-around hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 shadow-md transition duration-200">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google" class="w-6 h-6 rounded-full">
      <span class="text-gray-800 dark:text-gray-200">Continue with Google</span>
    </button>
    <div class="text-center mt-4">
      <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:underline">Log In</a></p>
    </div>
  </div>
</div>

MaterialEarthToneLoginSignupComponent

Un componente de inicio de sesión y registro de estilo Material Design receptivo con combinación de colores en tonos tierra, complejidad moderada con alternancia interactiva entre formularios, diseñado para paneles con soporte para modo oscuro.

Abrir Vista previa

                <!DOCTYPE html>
<html lang='en' class='h-full bg-amber-50 dark:bg-gray-900'>
  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Login / Signup Component</title>
    <script src='https://cdn.tailwindcss.com'></script>
  </head>
  <body class='min-h-screen bg-amber-50 dark:bg-gray-900 flex items-center justify-center p-4'>
    <div class='max-w-4xl w-full bg-stone-50 dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2'>
      <div class='hidden md:block'>
        <img src='https://picsum.photos/id/1018/800/800' alt='Dashboard Illustration' class='object-cover w-full h-full' />
      </div>
      <div class='p-8'>
        <input id='tabToggle' type='checkbox' class='peer sr-only' />
        <div class='flex justify-center mb-6 space-x-4'>
          <label for='tabToggle' class='cursor-pointer text-lg font-medium text-amber-700 peer-checked:text-stone-500 transition'>Login</label>
          <label for='tabToggle' class='cursor-pointer text-lg font-medium text-stone-500 peer-checked:text-amber-700 transition'>Signup</label>
        </div>
        <form class='space-y-4 transition-all duration-300 ease-in peer-checked:hidden'>
          <div>
            <label for='loginEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
            <input id='loginEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <div>
            <label for='loginPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
            <input id='loginPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Login</button>
        </form>
        <form class='space-y-4 transition-all duration-300 ease-in hidden peer-checked:block'>
          <div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
            <div>
              <label for='firstName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>First Name</label>
              <input id='firstName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
            <div>
              <label for='lastName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Last Name</label>
              <input id='lastName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
          </div>
          <div>
            <label for='signupEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
            <input id='signupEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
            <div>
              <label for='signupPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
              <input id='signupPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
            <div>
              <label for='confirmPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Confirm Password</label>
              <input id='confirmPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
          </div>
          <button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Sign Up</button>
        </form>
      </div>
    </div>
  </body>
</html>

Brutalismo Componente de inicio de sesión/registro

Un componente de inicio de sesión/registro de estilo brutalista con una combinación de colores triádica, complejidad media, diseño receptivo y compatibilidad con el modo oscuro. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-yellow-400 dark:bg-purple-800 p-4">
  <div class="bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white p-8 rounded-none shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-center uppercase">Join Us</h2>
    
    <div class="mb-4">
      <label for="email" class="block text-sm font-bold mb-2">Email</label>
      <input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-yellow-200 dark:bg-purple-900 focus:outline-none focus:ring-0 focus:border-red-600 dark:focus:border-red-400" placeholder="[email protected]">
    </div>
    
    <div class="mb-6">
      <label for="password" class="block text-sm font-bold mb-2">Password</label>
      <input type="password" id="password" class="w-full p-3 border-4 border-black dark:border-white bg-yellow-200 dark:bg-purple-900 focus:outline-none focus:ring-0 focus:border-red-600 dark:focus:border-red-400" placeholder="********">
    </div>
    
    <button class="w-full bg-red-600 dark:bg-red-400 text-white font-bold py-3 px-4 border-4 border-black dark:border-white uppercase">Login</button>
    
    <p class="text-center text-sm mt-4">Don't have an account? <a href="#" class="text-red-600 dark:text-red-400 font-bold">Sign up here</a>.</p>
    
    <div class="mt-8 text-center">
      <p class="text-lg font-bold mb-4">Or login with:</p>
      <div class="flex justify-center space-x-4">
        <button class="bg-blue-600 dark:bg-blue-400 text-white font-bold py-2 px-4 border-4 border-black dark:border-white">Facebook</button>
        <button class="bg-red-500 dark:bg-red-700 text-white font-bold py-2 px-4 border-4 border-black dark:border-white">Google</button>
      </div>
    </div>

  </div>
</div>

Componente de inicio de sesión/registro

Un componente simple de inicio de sesión/registro diseñado para el modo oscuro con un esquema de color pastel, adecuado para un portafolio.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-900 text-gray-200">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold mb-6 text-center">Welcome to My Portfolio</h2>
        <form>
            <div class="mb-4">
                <label class="block text-sm mb-2" for="email">Email</label>
                <input type="email" id="email" placeholder="[email protected]" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-gray-500" required />
            </div>
            <div class="mb-6">
                <label class="block text-sm mb-2" for="password">Password</label>
                <input type="password" id="password" placeholder="your password" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-gray-500" required />
            </div>
            <button type="submit" class="w-full py-2 bg-green-600 hover:bg-green-500 text-white rounded">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-sm">Don't have an account? <a href="#" class="text-green-400 hover:underline">Sign Up</a></p>
        </div>
    </div>
</div>
<!-- Dark Mode Styles -->
<div class="dark:bg-gray-900 dark:text-gray-200">
    <div class="dark:bg-gray-800 dark:border-gray-700">
        <input type="email" class="dark:bg-gray-700 dark:border-gray-600">
        <input type="password" class="dark:bg-gray-700 dark:border-gray-600">
    </div>
</div>

Componente de inicio de sesión/registro

Un componente de inicio de sesión/registro diseñado en estilo neumorfismo con una combinación de colores pastel, adecuado para sitios web comerciales/corporativos y compatible con el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
    <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Welcome Back</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
                <input type="email" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Password</label>
                <input type="password" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <button type="submit" class="w-full bg-gradient-to-r from-indigo-400 to-blue-500 hover:from-indigo-500 hover:to-blue-600 text-white font-semibold rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-600 transition duration-300">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-300">or</p>
            <button class="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 mt-2">Sign Up</button>
        </div>
    </div>
</div>

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
    <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Create an Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
                <input type="text" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
                <input type="email" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Password</label>
                <input type="password" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <button type="submit" class="w-full bg-gradient-to-r from-indigo-400 to-blue-500 hover:from-indigo-500 hover:to-blue-600 text-white font-semibold rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-600 transition duration-300">Sign Up</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-300">or</p>
            <button class="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 mt-2">Login</button>
        </div>
    </div>
</div>