Componentes Formulario de inicio de sesión Componente de formulario de inicio de sesión

Componente de formulario de inicio de sesión

Un formulario de inicio de sesión complejo y responsivo con un diseño minimalista / plano adecuado para un blog o un sitio de contenido. Cuenta con un esquema de color monocromático, soporte para temas oscuros y múltiples elementos interactivos, implementados puramente con HTML y Tailwind CSS.

Vista previa

Código HTML

<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-xl w-full max-w-md">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Login to Your Account</h2>

    <div class="flex justify-center mb-6">
      <img src="https://picsum.photos/100" alt="Blog Logo" class="rounded-full w-24 h-24 object-cover border-4 border-gray-200 dark:border-gray-700">
    </div>

    <form>
      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-3 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 text-gray-900 dark:text-white transition duration-200" placeholder="your.email@example.com">
      </div>
      <div class="mb-5">
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
        <input type="password" id="password" class="w-full px-4 py-3 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 text-gray-900 dark:text-white transition duration-200" placeholder="••••••••">
      </div>

      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
          <input type="checkbox" id="remember_me" class="h-4 w-4 text-blue-600 dark:text-blue-500 rounded border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400">
          <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>
        <a href="#" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200">Forgot Password?</a>
      </div>

      <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        Login
      </button>
    </form>

    <div class="mt-8 text-center text-gray-600 dark:text-gray-400">
      <p>Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 font-medium transition duration-200">Sign Up</a></p>
    </div>

    <div class="mt-6 flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
      <button class="w-full sm:w-auto bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-bold py-2 px-4 rounded-md flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12.0003 4.75C9.0935 4.75 6.647 6.0211 5.09348 7.98926L2.36865 5.26442C4.24689 3.03348 7.02705 1.75 12.0003 1.75C16.8967 1.75 20.9157 3.4283 23.6393 5.92015L20.6125 8.947C18.667 7.0425 15.6033 5.92015 12.0003 5.92015C9.80036 5.92015 7.84687 6.69344 6.37508 8.01639L5 6.77258V6.7725C5 6.81846 5 6.86445 5 6.91042Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M4.75 9.99997C4.75 10.974 4.887 11.9167 5.13847 12.8021L7.75549 11.3995C7.66982 11.0858 7.58784 10.741 7.58784 9.99997C7.58784 8.24357 8.35821 6.67104 9.68965 5.56832L6.96482 2.84348C5.2323 4.41595 4.75 7.0396 4.75 9.99997Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M22.25 10C22.25 11.9604 21.6881 14.1568 20.3607 16.3607L18.0625 14.0625C19.2605 12.6377 19.8291 11.2335 19.8291 10C19.8291 8.35848 19.2605 6.7552 18.0625 5.33045L20.3607 3.03225C21.6881 5.23616 22.25 7.43261 22.25 10Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M12.0003 19.25C14.7397 19.25 17.0664 18.2329 18.667 16.2925L20.6125 18.238C18.667 20.1425 15.6033 21.25 12.0003 21.25C7.02705 21.25 4.24689 19.9665 2.36865 17.7355L5.09348 15.0107C6.647 16.9788 9.0935 18.25 12.0003 18.25C14.1997 18.25 16.1532 17.4767 17.625 16.1538L16.2163 17.4116L18.9163 17.2916L17.625 18.25L12.0003 19.25Z" clip-rule="evenodd" fill-rule="evenodd"/>
        </svg>
        Login with Google
      </button>
      <button class="w-full sm:w-auto bg-blue-800 hover:bg-blue-900 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-md flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-blue-800 dark:focus:ring-blue-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M14 13.5h2.7L17 10h-3V7.9c0-.8.2-1.3 1.3-1.3H17V4.3c-.4 0-1.7-.1-2.9-.1-3.1 0-5.2 1.9-5.2 5.3v2.7H7v3h2.1V22h4.9v-8.5z"/>
        </svg>
        Login with Facebook
      </button>
    </div>
  </div>
</div>

Componentes relacionados

Componente de formulario de inicio de sesión

Un componente de formulario de inicio de sesión responsivo diseñado con los principios de Material Design y diseñado con Tailwind CSS. Cuenta con una combinación de colores en tonos tierra y un diseño simple adecuado para un blog o una plataforma de consumo de contenido, con soporte para temas oscuros.

Abrir

Componente de formulario de inicio de sesión - Modo oscuro vibrante

Un componente de formulario de inicio de sesión complejo y receptivo diseñado para uso comercial/corporativo con una combinación de colores vibrantes y soporte completo para el modo oscuro, con el objetivo de reducir la fatiga visual.

Abrir

Componente de formulario de inicio de sesión

Un componente de formulario de inicio de sesión minimalista diseñado con un esquema de color triádico adecuado para la exhibición de portafolios con soporte para modo oscuro.

Abrir