RetroLoginFormComponent
Reaktionsschnelles, von dunklem Thema unterstütztes Retro-/Vintage-Anmeldeformular mit Erdtönen, geeignet für Geschäfts-/Unternehmenswebsites. Verwendet minimale Elemente.
HTML-Code
<div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900">
<div class="max-w-md w-full p-8 bg-amber-100 dark:bg-amber-900 rounded-lg shadow-lg">
<h2 class="text-center text-3xl font-extrabold text-stone-800 dark:text-stone-200 mb-6">Welcome Back</h2>
<form class="space-y-6">
<div>
<label for="email" class="sr-only">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Email address">
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Password">
</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-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-700 rounded">
<label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-100">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-amber-600 hover:text-amber-500">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-amber-700 hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-800 dark:hover:bg-amber-700">
Sign in
</button>
</div>
</form>
</div>
</div>
Verwandte Komponenten
Komponente des Anmeldeformulars
Eine minimalistische Login-Formularkomponente mit einem triadischen Farbschema, das für die Präsentation von Portfolios mit Unterstützung des Dunkelmodus geeignet ist.
Komponente des Anmeldeformulars
Ein reaktionsschnelles, komplexes Anmeldeformular mit einem minimalistischen/flachen Design, das für einen Blog oder eine Content-Site geeignet ist. Es verfügt über ein monochromatisches Farbschema, Unterstützung für dunkle Themen und mehrere interaktive Elemente, die ausschließlich mit HTML und Tailwind CSS implementiert sind.
Komponente des Anmeldeformulars
Eine responsive Anmeldeformularkomponente mit skeuomorphem Design, monochromatischem Farbschema und Unterstützung für dunkle Themen, die für Unternehmenswebsites geeignet ist.