Componente Modulo di accesso 3D
Un componente del modulo di accesso 3D reattivo progettato per siti Web aziendali/aziendali, che incorpora i toni della terra e il supporto della modalità scura.
Codice 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 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-8 max-w-md w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login to Your Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
<input type="email" id="email" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" 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="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" placeholder="••••••••" required>
</div>
<div class="mb-4 flex items-center justify-between">
<div>
<input type="checkbox" class="text-green-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400">
<span class="text-gray-700 dark:text-gray-300 ml-2">Remember me</span>
</div>
<a href="#" class="text-green-600 dark:text-green-400 text-sm">Forgot Password?</a>
</div>
<button type="submit" class="w-full bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 transition duration-200">Login</button>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400 text-sm">
Don't have an account? <a href="#" class="text-green-600 dark:text-green-400">Sign Up</a>
</p>
</div>
</div>Componenti correlati
Modulo di accesso minimalista
Un modulo di accesso minimalista per i siti di e-commerce, con supporto per il design reattivo e la modalità scura. Utilizza una combinazione di colori analoga. Niente JavaScript.
Modulo di accesso al neumorfismo
Un componente Modulo di accesso progettato con lo stile Neumorfismo, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Componente Modulo di accesso
Un componente del modulo di accesso progettato con Glassmorphism, con elementi traslucidi simili al vetro smerigliato ed effetti reattivi, che supporta temi scuri utilizzando Tailwind CSS.