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="your@email.com">
      </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 esqueuomórfico diseñado con colores vibrantes y complejidad moderada, adecuado para una cartera.

Abrir

Componente de formulario de inicio de sesión

Un componente de formulario de inicio de sesión diseñado en 3D con un esquema de color triádico, adecuado para el comercio electrónico, con soporte y capacidad de respuesta para temas oscuros, construido con Tailwind CSS.

Abrir

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