Komponente des Anmeldeformulars
Eine responsive Login-Formular-Komponente, die nach den Prinzipien des Material Designs entworfen und mit Tailwind CSS gestaltet wurde. Es verfügt über ein Farbschema in Erdtönen und ein einfaches Layout, das für einen Blog oder eine Plattform zum Konsum von Inhalten geeignet ist, mit Unterstützung für dunkle Themen.
HTML-Code
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-full max-w-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" 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 type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="••••••••" required>
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
</div>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">
Don’t have an account? <a href="#" class="text-green-500 hover:text-green-400">Sign up</a>
</p>
</div>
</div>Verwandte Komponenten
Neumorphism Login-Formular
Eine Anmeldeformular-Komponente, die im Neumorphism-Stil entworfen wurde, mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.
Komponente des Anmeldeformulars
Eine skeuomorphe Login-Formularkomponente mit lebendigen Farben und moderater Komplexität, die für ein Portfolio geeignet ist.
Komponente des Anmeldeformulars
Eine einfache und reaktionsschnelle Login-Formular-Komponente, die mit einer pastellfarbenen Farbpalette (sanfte Rosatöne und komplementäre Grautöne) und ansprechenden Mikrointeraktionen wie sanften Übergängen und subtilen Hover/Fokus-Effekten erstellt wurde. Es wurde für Geschäfts- oder Unternehmenswebsites entwickelt und verfügt über ein übersichtliches Layout, ist vollständig reaktionsschnell und bietet umfassende Unterstützung für dunkle Themen. Erstellt ausschließlich mit HTML und Tailwind CSS.