Componente di accesso/registrazione
Un componente di accesso/registrazione progettato in stile neumorfismo con una combinazione di colori pastello, adatto per siti Web aziendali/aziendali e che supporta la modalità scura.
Codice HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-8 max-w-sm w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Welcome Back</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
<input type="email" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2">Password</label>
<input type="password" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
</div>
<button type="submit" class="w-full bg-gradient-to-r from-indigo-400 to-blue-500 hover:from-indigo-500 hover:to-blue-600 text-white font-semibold rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-600 transition duration-300">Login</button>
</form>
<div class="text-center mt-4">
<p class="text-gray-600 dark:text-gray-300">or</p>
<button class="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 mt-2">Sign Up</button>
</div>
</div>
</div>
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-8 max-w-sm w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Create an Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
<input type="text" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
<input type="email" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2">Password</label>
<input type="password" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
</div>
<button type="submit" class="w-full bg-gradient-to-r from-indigo-400 to-blue-500 hover:from-indigo-500 hover:to-blue-600 text-white font-semibold rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-600 transition duration-300">Sign Up</button>
</form>
<div class="text-center mt-4">
<p class="text-gray-600 dark:text-gray-300">or</p>
<button class="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 mt-2">Login</button>
</div>
</div>
</div>Componenti correlati
Componente di accesso/registrazione
Un componente di accesso/registrazione semplice, pulito e minimalista con uno stile tipografico svizzero/internazionale e un'allegra combinazione di colori caramelle/dolci, progettato per siti Web aziendali/aziendali. È completamente reattivo e include il supporto per la modalità oscura.
Componente di accesso/registrazione
Un componente di accesso/registrazione reattivo progettato in uno stile scheumorfico utilizzando Tailwind CSS, con supporto per temi scuri.
MaterialeTerraTonoLoginSignupComponent
Un componente reattivo per l'accesso e l'iscrizione in stile Material Design con combinazione di colori della terra, complessità moderata con commutazione interattiva tra i moduli, progettato per dashboard con supporto per la modalità oscura.