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.
HTML-Code
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
<h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
</div>
<div class="mt-6">
<button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
</div>
</form>
</div>
</div>
Verwandte Komponenten
Komponente des Anmeldeformulars
Eine komplexe, reaktionsschnelle Login-Formularkomponente mit Erdtönen, Material Design-Einflüssen, geeignet für Business-/Unternehmenswebsites und mit Unterstützung für den Dunkelmodus.
Komponente des Anmeldeformulars
Responsives Anmeldeformular mit Materialdesign, triadischem Farbschema und Unterstützung für den Dunkelmodus mit Tailwind CSS.
Komponente des Anmeldeformulars
Eine mit Glassmorphism entworfene Login-Formularkomponente mit mattglasähnlichen durchscheinenden Elementen und responsiven Effekten, die dunkle Themen mit Tailwind CSS unterstützen.