Komponente des Anmeldeformulars
Anmeldeformularkomponente mit 3D-Design, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.
HTML-Code
```html
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 p-10 rounded-lg shadow-lg w-96 transform transition duration-500 hover:scale-105">
<h2 tabindex="0" class="text-3xl font-bold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
<form>
<div class="mb-5">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
<input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="Enter your password">
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
Login
</button>
</form>
<div class="mt-6 text-center">
<a href="#" class="text-sm text-blue-600 hover:underline dark:text-blue-400">Forgot Password?</a>
</div>
</div>
</div>
```
Verwandte Komponenten
Komponente des Anmeldeformulars
Eine reaktionsschnelle Anmeldeformular-Komponente, die im Glassmorphism-Stil entwickelt wurde und Milchglaseffekte, Unschärfeeffekte und Unterstützung für den Dunkelmodus mit Tailwind CSS enthält.
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.
Komponente des Anmeldeformulars
Eine skeuomorphe Login-Formularkomponente mit lebendigen Farben und moderater Komplexität, die für ein Portfolio geeignet ist.