Componentes Formulario de inscripción Componente del formulario de registro

Componente del formulario de registro

Un componente de formulario de registro receptivo diseñado con un estilo neumórfico que utiliza colores apagados/desaturados, adecuado para un entorno de tablero. Incluye soporte para el modo oscuro y utiliza sombras sutiles para crear un efecto extruido.

Vista previa

Código HTML

<div class="min-h-screen flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-800 transition-colors duration-300">
  <div class="w-full max-w-md p-8 rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-700 bg-gray-200
              dark:border dark:border-gray-600
              [box-shadow:8px_8px_16px_#bebebe,_-8px_-8px_16px_#ffffff]
              dark:[box-shadow:8px_8px_16px_#333333,_-8px_-8px_16px_#555555]">
    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-6 text-center">Register Account</h2>

    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
               text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
               [box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
               dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Username field">
      </div>

      <div class="mb-4">
        <label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
               text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
               [box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
               dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Email field">
      </div>

      <div class="mb-6">
        <label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" name="password" placeholder="Minimum 8 characters" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
               text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
               [box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
               dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Password field">
      </div>

      <button type="submit" class="w-full p-3 rounded-lg font-semibold text-white
              bg-blue-500 hover:bg-blue-600 active:bg-blue-700
              shadow-md hover:shadow-lg dark:shadow-md dark:hover:shadow-lg
              [box-shadow:8px_8px_16px_#bebebe,_-8px_-8px_16px_#ffffff]
              dark:[box-shadow:8px_8px_16px_#333333,_-8px_-8px_16px_#555555]
              focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2
              dark:focus:ring-offset-gray-700 transition-all duration-200"
              aria-label="Register button">
        Register
      </button>

      <p class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
        Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 font-medium" aria-label="Login link">Login here</a>
      </p>
    </form>
  </div>
</div>

Componentes relacionados

Componente de formulario de registro - Tema de música/audio

Un componente de formulario de registro limpio y minimalista con un estilo de tipografía suizo/internacional y una combinación de colores otoñales, diseñado para plataformas de música/audio. Es totalmente responsivo, admite el modo oscuro y utiliza HTML semántico.

Abrir