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.
Componente del formulario de registro
Un componente de formulario de registro con diseño de neumorfismo, combinación de colores en escala de grises, complejidad moderada y compatibilidad con temas oscuros receptivos mediante Tailwind CSS.
Componente del formulario de registro
Un componente de formulario de registro responsivo con microinteracciones y soporte para temas oscuros, diseñado con Tailwind CSS.