Componente de formulario de inicio de sesión 3D
Un formulario de inicio de sesión responsivo con un diseño 3D, combinación de colores triádica y compatibilidad con temas oscuros. Adecuado para interfaces de redes sociales.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg transform transition-all duration-500 hover:scale-105 p-8 rounded-lg border border-gray-200 dark:border-gray-700">
<div class="text-center mb-6">
<img class="w-16 h-16 rounded-full mx-auto mb-2" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome Back!</h2>
<p class="text-gray-600 dark:text-gray-400">Please login to your account</p>
</div>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-400" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-400" type="password" id="password" placeholder="••••••••" required>
</div>
<button class="w-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white font-semibold p-3 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out" type="submit">Login</button>
<div class="text-center mt-4">
<p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
<p class="text-gray-600 dark:text-gray-400"><a href="#" class="text-blue-500 hover:underline">Forgot your password?</a></p>
</div>
</form>
</div>
</div>Componentes relacionados
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión responsivo diseñado con los principios de Material Design y diseñado con Tailwind CSS. Cuenta con una combinación de colores en tonos tierra y un diseño simple adecuado para un blog o una plataforma de consumo de contenido, con soporte para temas oscuros.
Formulario de inicio de sesión brutalista
Un formulario de inicio de sesión complejo y receptivo diseñado en un estilo brutalista con tonos tierra, adaptado a aplicaciones de comercio electrónico, con soporte para modo oscuro.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión responsivo con estilo glassmorphism, con elementos translúcidos con efectos de desenfoque y compatibilidad con temas oscuros.