Componente del formulario de registro
Un componente de formulario de registro interactivo con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, que admite el modo oscuro y muestra imágenes de marcador de posición.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<form class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md p-8 w-full max-w-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Register</h2>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
<input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="username" placeholder="Your Username" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="email" id="email" placeholder="Your Email" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="password" id="password" placeholder="Your Password" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
<input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="avatar" value="https://randomuser.me/api/portraits/men/10.jpg" readonly />
</div>
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md shadow focus:outline-none focus:ring focus:ring-blue-500 mt-4">Register</button>
</form>
</div>Componentes relacionados
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.
Formulario de inscripción Skeuomórfico
Formulario de registro esqueuomórfico con esquema de color monocromático, diseñado para uso comercial / corporativo con soporte de modo oscuro y capacidad de respuesta utilizando Tailwind CSS. Sin JavaScript.
Componente del formulario de registro
Un componente de formulario de registro responsivo diseñado con un estilo skeuomórfico, utilizando un esquema de color monocromático y adaptado a las experiencias de comercio electrónico. Es compatible con el modo oscuro e incluye funciones de entrada interactivas para el registro de usuarios.