Componente del formulario de registro
Un formulario de registro responsivo con diseño de neumorfismo, combinación de colores análoga y compatibilidad con modo oscuro, construido con Tailwind CSS para fines de redes sociales.
Código HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-sm p-8 rounded-xl bg-gray-100 dark:bg-gray-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
<form>
<div class="mb-5">
<label for="username" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Username</label>
<input type="text" id="username" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your username">
</div>
<div class="mb-5">
<label for="email" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" id="password" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your password">
</div>
<button type="submit" class="w-full px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 shadow-neumorphism-light dark:shadow-neumorphism-dark">Register</button>
</form>
<div class="mt-6 text-center text-gray-700 dark:text-gray-300">
Already have an account? <a href="#" class="font-medium text-blue-500 hover:underline">Login</a>
</div>
</div>
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
}
.shadow-inner-neumorphism-light {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-inner-neumorphism-dark {
box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
}
</style>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.
registro-formulario-ecommerce-viento de cola
Componente de formulario de registro de diseño plano minimalista para comercio electrónico que utiliza Tailwind CSS con soporte de modo responsivo y oscuro, con un esquema de color azul-naranja complementario.
Componente del formulario de registro
Un componente de formulario de registro responsivo con microinteracciones y soporte para temas oscuros, diseñado con Tailwind CSS.