Componente del formulario de registro
Un componente de formulario de registro receptivo con un diseño de morfismo de vidrio, combinación de colores en escala de grises y compatibilidad con temas oscuros, adecuado para sitios web comerciales / corporativos.
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 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-8 max-w-md w-full m-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Register</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Username</label>
<input type="text" id="username" name="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your username">
</div>
<div class="mb-4">
<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" name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" 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" name="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300">
Register
</button>
<a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200" href="#">
Already have an account?
</a>
</div>
</form>
</div>
</div>Componentes relacionados
Componente del formulario de registro
Un componente de formulario de registro receptivo diseñado en un estilo brutalista con un esquema de color pastel y adecuado para sitios web comerciales / corporativos. Cuenta con soporte para el modo oscuro usando Tailwind CSS.
Formulario de registro de neumorfismo
Componente de formulario de registro de neumorfismo con soporte de tema oscuro usando Tailwind CSS
Formulario de inscripción
Un elegante componente de formulario de registro en modo oscuro que utiliza Tailwind CSS, con campos para información del usuario y diseño responsivo.