Modulo di accesso Skeuomorphic
Un componente del modulo di accesso scheumorfico con una combinazione di colori in scala di grigi e una complessità complessa, progettato per un sito Web di portfolio. È reattivo e supporta il tema scuro.
Codice HTML
<div class="min-h-screen bg-gray-200 flex items-center justify-center dark:bg-gray-900">
<div class="bg-white p-10 rounded-lg shadow-xl w-96 dark:bg-gray-800">
<h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">Login</h2>
<form>
<div class="mb-5">
<label for="email" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Email</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="[email protected]">
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Password</label>
<input type="password" id="password" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="********">
</div>
<button type="submit" class="w-full bg-gray-700 text-white py-3 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
Login
</button>
</form>
<p class="text-center text-gray-600 mt-6 text-sm dark:text-gray-400">
Don't have an account? <a href="#" class="text-gray-700 hover:underline dark:text-gray-300">Sign Up</a>
</p>
</div>
</div>
Componenti correlati
Componente Modulo di accesso
Un componente del modulo di accesso reattivo con design Skeuomorphic, combinazione di colori monocromatici e supporto per temi scuri, adatto per siti Web aziendali.
Componente Modulo di accesso
Un componente del modulo di accesso minimalista progettato con una combinazione di colori triadica adatta per la presentazione del portfolio con supporto per la modalità oscura.
Modulo di accesso Componente 37
Un componente del modulo di accesso reattivo progettato in stile Material Design con Tailwind CSS, che supporta la modalità oscura.