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
Formulario de inicio de sesión esqueuomórfico para redes sociales con colores pastel, responsivo y soporte para modo oscuro. El formulario presenta un sutil efecto 3D en las entradas y los botones, imitando elementos físicos. Las sombras y los degradados se utilizan para mejorar la sensación skeuomórfica. Las entradas tienen una sombra insertada suave y los botones tienen una apariencia elevada en la que se puede hacer clic. El esquema de color pastel pasa suavemente a una versión más oscura y apagada en el modo oscuro, manteniendo la legibilidad y la comodidad visual. El diseño responsivo garantiza la usabilidad en todos los dispositivos.
Componente de formulario de inicio de sesión
Un formulario de inicio de sesión simple y receptivo diseñado con un estilo esqueuomórfico que imita elementos del mundo real utilizando una combinación de colores vibrantes. Es adecuado para interfaces de redes sociales y admite el modo oscuro.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión simple diseñado en un estilo brutalista con tonos tierra, adecuado para fines de blog / contenido y optimizado para temas claros y oscuros.