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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
<div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-2xl w-full max-w-md
transform transition-all duration-300 ease-in-out
hover:shadow-3xl hover:-translate-y-1
ring-4 ring-indigo-300/50 dark:ring-gray-600/50
relative overflow-hidden">
<!-- Skeuomorphic "Glass" Effect Overlay -->
<div class="absolute inset-0 bg-white/20 dark:bg-gray-800/20 backdrop-blur-sm rounded-xl
transform -rotate-3 translate-x-2 translate-y-2 opacity-0 group-hover:opacity-100 transition duration-500 ease-in-out"></div>
<h2 class="text-3xl font-extrabold text-gray-800 dark:text-white text-center mb-8
drop-shadow-lg [text-shadow:0px_2px_4px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Welcome Back!
</h2>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
[text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Email
</label>
<div class="relative">
<input type="email" id="email" name="email" autocomplete="email"
class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
focus:ring-2 focus:ring-indigo-400 focus:border-transparent
transition duration-200 ease-in-out
[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
placeholder="[email protected]">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 10.49l7.997-4.606A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
<path d="M18 8.118l-8 4.615-8-4.615V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
</svg>
</div>
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
[text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Password
</label>
<div class="relative">
<input type="password" id="password" name="password" autocomplete="current-password"
class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
focus:ring-2 focus:ring-indigo-400 focus:border-transparent
transition duration-200 ease-in-out
[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
placeholder="••••••••">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H7V7a3 3 0 016 0v2h-2V7a1 1 0 00-1-1zm-4 8h8v7H6v-7z"></path>
</svg>
</div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox"
class="h-4 w-4 text-indigo-600 dark:text-indigo-400 rounded
focus:ring-indigo-500 dark:focus:ring-indigo-300
ring-offset-white dark:ring-offset-gray-700
border-gray-300 dark:border-gray-600
cursor-pointer
[box-shadow:0px_1px_2px_rgba(0,0,0,0.1)] dark:[box-shadow:0px_1px_2px_rgba(0,0,0,0.4)]">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg
text-lg font-semibold text-white
bg-gradient-to-r from-indigo-500 to-purple-500
hover:from-indigo-600 hover:to-purple-600
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-gray-300
transition duration-200 ease-in-out
transform active:scale-98 active:shadow-md
[box-shadow:0px_4px_8px_rgba(0,0,0,0.2),inset_0px_1px_0px_rgba(255,255,255,0.4)]
dark:[box-shadow:0px_4px_8px_rgba(0,0,0,0.6),inset_0px_1px_0px_rgba(255,255,255,0.1)]">
Sign In
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">
Don't have an account?
<a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Sign Up
</a>
</p>
</div>
</div>
</div>Related Components
Login Form Component
A skeuomorphic login form component designed with vibrant colors and moderate complexity, suitable for a portfolio.
Brutalist_Login_Form_Travel_Tourism
A medium-complexity, brutalist-style login form with vibrant colors, designed for travel and tourism websites. Features high contrast, bold typography, and full responsiveness with dark mode support.
Skeuomorphic Login Form
A responsive login form with Skeuomorphism design, monochromatic color scheme, and moderate complexity, designed for social media platforms. Includes dark mode support using Tailwind CSS.