Componentes de búsqueda

Categorías

Componentes Formulario de inicio de sesión

Formulario de inicio de sesión

Formulario para la autenticación de usuarios

Componente de formulario de inicio de sesión

Un componente de formulario de inicio de sesión simple y receptivo diseñado con una paleta de colores pastel (rosas suaves y grises complementarios) y microinteracciones atractivas, como transiciones suaves y sutiles efectos de desplazamiento/enfoque. Diseñado para sitios web comerciales o corporativos, presenta un diseño limpio, es totalmente receptivo e incluye soporte integral para temas oscuros. Construido exclusivamente con HTML y Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-pink-50 dark:bg-slate-900 p-4 transition-colors duration-300">
  <div class="bg-white dark:bg-slate-800 p-8 md:p-10 rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-500 hover:scale-105">
    <h2 class="text-3xl font-bold text-center text-pink-600 dark:text-pink-400 mb-8">
      Welcome Back
    </h2>
    <form action="#" method="POST" class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
          Email address
        </label>
        <input
          id="email"
          name="email"
          type="email"
          autocomplete="email"
          required
          class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
          placeholder="[email protected]"
        />
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
          Password
        </label>
        <input
          id="password"
          name="password"
          type="password"
          autocomplete="current-password"
          required
          class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
          placeholder="••••••••"
        />
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-pink-500 dark:text-pink-400 focus:ring-pink-400 dark:focus:ring-pink-300 border-pink-300 dark:border-slate-500 rounded bg-pink-50 dark:bg-slate-700 transition duration-150 ease-in-out" />
          <label for="remember-me" class="ml-2 block text-sm text-slate-800 dark:text-slate-300">
            Remember me
          </label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
            Forgot password?
          </a>
        </div>
      </div>

      <div>
        <button
          type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-medium text-white bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-slate-800 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95"
        >
          Sign In
        </button>
      </div>
    </form>
    <p class="mt-8 text-center text-sm text-slate-600 dark:text-slate-400">
      Not a member?
      <a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
        Sign up now
      </a>
    </p>
  </div>
</div>

Formulario de inicio de sesión de comercio electrónico minimalista

Un formulario de inicio de sesión de diseño minimalista y plano con colores pastel, diseñado para sitios de comercio electrónico. Es simple, receptivo y admite el modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div
      class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900"
    >
      <div
        class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
      >
        <h2
          class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6"
        >
          Login
        </h2>
        <form>
          <div class="mb-4">
            <label
              for="email"
              class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
            >
              Email Address
            </label>
            <input
              type="email"
              id="email"
              name="email"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your email"
            />
          </div>
          <div class="mb-6">
            <label
              for="password"
              class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
            >
              Password
            </label>
            <input
              type="password"
              id="password"
              name="password"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your password"
            />
          </div>
          <button
            type="submit"
            class="w-full bg-pastel-blue text-black py-2 px-4 rounded-md hover:bg-pastel-darker-blue focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200"
          >
            Login
          </button>
        </form>
        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-300">
            Don't have an account? <a href="#" class="text-pastel-blue hover:underline">Sign Up</a>
          </p>
        </div>
      </div>
    </div>

Formulario de inicio de sesión minimalista

Un formulario de inicio de sesión minimalista para sitios de comercio electrónico, con soporte para diseño responsivo y modo oscuro. Utiliza un esquema de color análogo. Sin JavaScript.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white">Login</h2>
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none cursor-text focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:border-gray-600">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none cursor-text focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:border-gray-600">
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-indigo-600 border-gray-300 rounded dark:text-indigo-500 dark:border-gray-600 dark:bg-gray-700 focus:ring-indigo-500">
          <label for="remember-me" class="block ml-2 text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group 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-600">
          Sign in
        </button>
      </div>
    </form>
    <div class="text-sm text-center">
      <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Sign up</a></p>
    </div>
  </div>
</div>

Formulario de inicio de sesión skeuomórfico

Un formulario de inicio de sesión responsivo con diseño de skeuomorfismo, combinación de colores monocromática y complejidad moderada, diseñado para plataformas de redes sociales. Incluye soporte para el modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <form class="max-w-sm mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark">
  <div class="mb-6">
    <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-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your email">
  </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-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your password">
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline transform transition duration-300 ease-in-out hover:scale-105" type="button">
      Sign In
    </button>
    <a class="inline-block align-baseline font-bold text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-500" href="#">
      Forgot Password?
    </a>
  </div>
  <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 gap-4 mt-2">
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-google text-xl"></i>
      </button>
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-facebook text-xl"></i>
      </button>
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-twitter text-xl"></i>
      </button>
    </div>
  </div>
</form>

Componente de formulario de inicio de sesión 3D

Un componente de formulario de inicio de sesión 3D receptivo diseñado para sitios web comerciales / corporativos, que incorpora tonos tierra y soporte para modo oscuro.

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 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login to Your Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
        <input type="email" id="email" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
        <input type="password" id="password" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" placeholder="••••••••" required>
      </div>
      <div class="mb-4 flex items-center justify-between">
        <div>
          <input type="checkbox" class="text-green-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400">
          <span class="text-gray-700 dark:text-gray-300 ml-2">Remember me</span>
        </div>
        <a href="#" class="text-green-600 dark:text-green-400 text-sm">Forgot Password?</a>
      </div>
      <button type="submit" class="w-full bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 transition duration-200">Login</button>
    </form>
    <p class="mt-4 text-center text-gray-600 dark:text-gray-400 text-sm">
      Don't have an account? <a href="#" class="text-green-600 dark:text-green-400">Sign Up</a>
    </p>
  </div>
</div>

Formulario de inicio de sesión brutalista

Un formulario de inicio de sesión complejo y receptivo diseñado en un estilo brutalista con tonos tierra, adaptado a aplicaciones de comercio electrónico, con soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-300 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg w-full max-w-md">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="email">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 focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
            </div>
            <div class="mb-4">
                <label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
            </div>
            <div class="flex justify-between mb-6">
                <div class="flex items-center">
                    <input type="checkbox" id="remember" class="mr-2 leading-tight">
                    <label for="remember" class="text-sm text-gray-600 dark:text-gray-400">Remember Me</label>
                </div>
                <a href="#" class="text-sm text-green-600 hover:underline dark:text-green-400">Forgot Password?</a>
            </div>
            <button type="submit" class="w-full py-2 text-white bg-green-600 rounded-md hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 transition duration-150 ease-in-out">Login</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-green-600 hover:underline dark:text-green-400">Sign Up</a></p>
        </div>
        <div class="mt-8 text-center">
            <img src="https://picsum.photos/100" alt="Random" class="rounded-full mx-auto">
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">User Avatar Loaded Randomly</p>
        </div>
    </div>
</div>

Componente de formulario de inicio de sesión

Formulario de inicio de sesión responsivo con diseño de materiales, combinación de colores triádica y compatibilidad con modo oscuro mediante Tailwind CSS.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="px-8 py-6 mt-4 text-left bg-white dark:bg-gray-800 shadow-lg rounded-lg">
    <h3 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login to your account</h3>
      <div class="mt-4">
          <div>
              <label class="block text-gray-700 dark:text-gray-200" for="email">Email</label>
              <input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
          </div>
          <div class="mt-4">
              <label class="block text-gray-700 dark:text-gray-200" for="password">Password</label>
              <input type="password" placeholder="Password" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
          </div>
          <div class="flex items-baseline justify-between">
              <button class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900 dark:bg-blue-700 dark:hover:bg-blue-900">Login</button>
              <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline focus:text-blue-800">Forgot password?</a>
          </div>
      </div>
  </div>
</div>

Componente de formulario de inicio de sesión

Un formulario de inicio de sesión simple y receptivo diseñado con un estilo esqueuomórfico que imita elementos del mundo real utilizando una combinación de colores vibrantes. Es adecuado para interfaces de redes sociales y admite el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-800 dark:to-purple-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">Welcome Back!</h2>    <div class="mt-6">      <div class="mb-4">        <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-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required/>      </div>      <div class="mb-6">        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>        <input type="password" id="password" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="••••••••" required/>      </div>      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">Login</button>    </div>    <div class="mt-4 text-center">      <img src="https://picsum.photos/50/50" alt="Login Illustration" class="mx-auto rounded-full"/>    </div>    <div class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">      Don't have an account? <a href="#" class="text-blue-500 dark:text-blue-400">Sign up</a>    </div>  </div> </div>

Componente de formulario de inicio de sesión

Un componente de formulario de inicio de sesión simple diseñado en un estilo brutalista con tonos tierra, adecuado para fines de blog / contenido y optimizado para temas claros y oscuros.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-brown-500 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-3xl font-bold text-white text-center mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-white text-sm font-bold mb-2" for="username">Username</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring focus:ring-brown-300" id="username" type="text" placeholder="Enter your username" required />
            </div>
            <div class="mb-6">
                <label class="block text-white text-sm font-bold mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring focus:ring-brown-300" id="password" type="password" placeholder="Enter your password" required />
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-brown-600 hover:bg-brown-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
            </div>
        </form>
    </div>
</div>

Formulario de inicio de sesión skeuomórfico

Un componente de formulario de inicio de sesión esqueuomórfico con un esquema de color en escala de grises y complejidad compleja, diseñado para un sitio web de portafolio. Es responsivo y admite temas oscuros.

Abrir Vista previa

                <div class="min-h-screen bg-gray-200 flex items-center justify-center dark:bg-gray-900">
  <div class="bg-white p-10 rounded-lg shadow-xl w-96 dark:bg-gray-800">
    <h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">Login</h2>
    <form>
      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="[email protected]">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="********">
      </div>
      <button type="submit" class="w-full bg-gray-700 text-white py-3 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
        Login
      </button>
    </form>
    <p class="text-center text-gray-600 mt-6 text-sm dark:text-gray-400">
      Don't have an account? <a href="#" class="text-gray-700 hover:underline dark:text-gray-300">Sign Up</a>
    </p>
  </div>
</div>