Komponenten Authentifizierungs-Komponenten Komponente "Authentifizierungskomponenten"

Komponente "Authentifizierungskomponenten"

Eine einfache und reaktionsschnelle Authentifizierungskomponente, die nach den Prinzipien von Material Design entwickelt wurde und Erdtöne und Unterstützung für den Dunkelmodus bietet. Geeignet für eine Portfolio-Site.

Vorschau

HTML-Code

<div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900 p-4"><div class="bg-white dark:bg-stone-800 p-8 rounded-lg shadow-md w-full max-w-md"><div class="flex justify-center mb-6"><svg class="h-12 w-12 text-stone-700 dark:text-stone-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 13a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div><h2 class="text-2xl font-bold text-center text-stone-800 dark:text-white mb-6">Welcome Back!</h2><form><div class="mb-4"><label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label><input type="email" id="email" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="[email protected]"></div><div class="mb-6"><label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label><input type="password" id="password" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="••••••••"></div><button type="submit" class="w-full bg-amber-700 hover:bg-amber-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Sign In</button></form><div class="mt-6 text-center"><a href="#" class="inline-block align-baseline font-bold text-sm text-amber-700 hover:text-amber-800">Forgot Password?</a></div></div></div>

Verwandte Komponenten

Authentifizierungs-Komponenten

Authentifizierungskomponenten Komponente mit 3D-Design, monochromatischem Farbschema, einfacher Komplexität und Portfoliozweck. Responsives Design mit Unterstützung für dunkle Themen.

Offen

Auth-Komponente

Eine skeuomorphe Authentifizierungskomponente, die mit Tailwind CSS entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Themen bietet.

Offen

Authentifizierungs-Komponenten

Eine reaktionsschnelle Authentifizierungskomponente mit Unterstützung für den Dunkelmodus, Verwendung von Tailwind CSS mit dunklem Hintergrund, einem Anmelde- und Registrierungsformular und zufälligen Platzhalterbildern für UI-Elemente.

Offen