3D Login Form Component
A responsive login form with a 3D design, triadic color scheme, and dark theme support. Suitable for social media interfaces.
HTML Code
<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>Related Components
Login Form Component
A responsive login form component styled with glassmorphism, featuring translucent elements with blur effects and dark theme support.
Login Form Component
Skeuomorphic Login Form for Social Media with Pastel Colors, Responsive, and Dark Mode Support. The form features a subtle 3D effect on inputs and buttons, mimicking physical elements. Shadows and gradients are used to enhance the skeuomorphic feel. Inputs have a soft inset shadow, and buttons have a raised, clickable appearance. The pastel color scheme transitions smoothly to a darker, muted version in dark mode, maintaining readability and visual comfort. Responsive design ensures usability across devices.
Minimalist E-commerce Login Form
A minimalist and flat design login form with pastel colors, designed for e-commerce sites. It is simple, responsive, and supports dark mode using Tailwind CSS.