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.
Codice HTML
<!DOCTYPE html>
<html lang='en' class='h-full bg-amber-50 dark:bg-gray-900'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<title>Login / Signup Component</title>
<script src='https://cdn.tailwindcss.com'></script>
</head>
<body class='min-h-screen bg-amber-50 dark:bg-gray-900 flex items-center justify-center p-4'>
<div class='max-w-4xl w-full bg-stone-50 dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2'>
<div class='hidden md:block'>
<img src='https://picsum.photos/id/1018/800/800' alt='Dashboard Illustration' class='object-cover w-full h-full' />
</div>
<div class='p-8'>
<input id='tabToggle' type='checkbox' class='peer sr-only' />
<div class='flex justify-center mb-6 space-x-4'>
<label for='tabToggle' class='cursor-pointer text-lg font-medium text-amber-700 peer-checked:text-stone-500 transition'>Login</label>
<label for='tabToggle' class='cursor-pointer text-lg font-medium text-stone-500 peer-checked:text-amber-700 transition'>Signup</label>
</div>
<form class='space-y-4 transition-all duration-300 ease-in peer-checked:hidden'>
<div>
<label for='loginEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
<input id='loginEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div>
<label for='loginPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
<input id='loginPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Login</button>
</form>
<form class='space-y-4 transition-all duration-300 ease-in hidden peer-checked:block'>
<div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<div>
<label for='firstName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>First Name</label>
<input id='firstName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div>
<label for='lastName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Last Name</label>
<input id='lastName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
</div>
<div>
<label for='signupEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
<input id='signupEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<div>
<label for='signupPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
<input id='signupPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div>
<label for='confirmPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Confirm Password</label>
<input id='confirmPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
</div>
<button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Sign Up</button>
</form>
</div>
</div>
</body>
</html>Componenti correlati
Modulo di accesso/iscrizione minimalista - Moda/Bellezza
Un modulo di accesso/iscrizione dal design minimalista e piatto su misura per i marchi di moda/bellezza, caratterizzato da colori neutri caldi, reattività completa e supporto per la modalità scura. Offre un'estetica pulita con particolare attenzione all'esperienza dell'utente.
Componente di accesso/registrazione Brutalism
Un componente di accesso/registrazione in stile brutalista con una combinazione di colori triadica, complessità media, design reattivo e supporto per la modalità oscura. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.
Componente di accesso/registrazione
Un modulo di accesso/registrazione semplice e reattivo progettato per le aziende manifatturiere/industriali, caratterizzato da una tavolozza monocromatica con un colore di accento brillante, transizioni sfumate e supporto per la modalità scura.