Modulo di registrazione skeuomorphic
Modulo di registrazione scheumorfico con combinazione di colori monocromatici, progettato per uso aziendale/aziendale con supporto per la modalità scura e reattività utilizzando Tailwind CSS. Niente JavaScript.
Codice HTML
<div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center">
<div class="bg-white dark:bg-gray-700 p-10 rounded-lg shadow-xl w-full max-w-md border-t-8 border-gray-400 dark:border-gray-600 transform skew-y-2">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center transform -skew-y-2">Create Account</h2>
<form class="transform -skew-y-2">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="name">
Full Name
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="name" type="text" placeholder="John Doe">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="email">
Email Address
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="email" type="email" placeholder="[email protected]">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="password">
Password
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="password" type="password" placeholder="********">
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="confirm-password">
Confirm Password
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="confirm-password" type="password" placeholder="********">
</div>
<div class="flex items-center justify-between transform skew-y-2">
<button class="bg-gray-600 dark:bg-gray-500 hover:bg-gray-700 dark:hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform -skew-y-2" type="button">
Register
</button>
<a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transform -skew-y-2" href="#">
Already have an account?
</a>
</div>
</form>
</div>
</div>Componenti correlati
Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, che supporta la modalità oscura e la visualizzazione di immagini segnaposto.
Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con microinterazioni e supporto per temi scuri, in stile CSS Tailwind.
Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con un design glassmorphism, una combinazione di colori in scala di grigi e un supporto per temi scuri, adatto per siti Web aziendali/aziendali.