Componentes Formulario de inicio de sesión Formulario de inicio de sesión skeuomórfico

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.

Vista previa

Código HTML

<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>

Componentes relacionados

Componente de formulario de inicio de sesión

Un componente de formulario de inicio de sesión responsivo diseñado con el estilo Glassmorphism, que incorpora efectos de vidrio esmerilado, efectos de desenfoque y soporte para el modo oscuro mediante Tailwind CSS.

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 simple diseñado en un estilo brutalista con tonos tierra, adecuado para fines de blog / contenido y optimizado para temas claros y oscuros.

Abrir