Komponente des Anmeldeformulars
Skeuomorphes Anmeldeformular für soziale Medien mit Unterstützung für Pastellfarben, Responsive und Dark Mode. Das Formular verfügt über einen subtilen 3D-Effekt auf Eingaben und Schaltflächen, der physische Elemente nachahmt. Schatten und Farbverläufe werden verwendet, um das skeuomorphe Gefühl zu verstärken. Eingaben haben einen weichen eingefügten Schatten und Schaltflächen haben ein erhabenes, anklickbares Erscheinungsbild. Das pastellfarbene Farbschema geht im Dunkelmodus nahtlos in eine dunklere, gedämpfte Version über, wobei die Lesbarkeit und der Sehkomfort erhalten bleiben. Responsive Design sorgt für die Nutzbarkeit auf allen Geräten.
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>Verwandte Komponenten
Komponente des Anmeldeformulars
Eine responsive Anmeldeformularkomponente mit skeuomorphem Design, monochromatischem Farbschema und Unterstützung für dunkle Themen, die für Unternehmenswebsites geeignet ist.
Komponente des Anmeldeformulars
Eine einfache Login-Formular-Komponente, die in einem brutalistischen Stil mit Erdtönen gestaltet ist, sich für Blog-/Content-Zwecke eignet und sowohl für helle als auch für dunkle Themen optimiert ist.
Minimalistisches Anmeldeformular
Ein minimalistisches Anmeldeformular für E-Commerce-Websites mit Unterstützung für responsives Design und Dunkelmodus. Verwendet ein analoges Farbschema. Kein JavaScript.