Componente del modulo di registrazione
Un modulo di registrazione minimalista e piatto con effetti reattivi e supporto per temi scuri, utilizzando Tailwind CSS.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Register</h2>
<form class="mt-6">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
<input type="text" id="name" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your full name" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
<input type="email" id="email" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your email" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
<input type="password" id="password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your password" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Confirm your password" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="avatar">Profile Picture</label>
<div class="mt-1 flex justify-center">
<img src="https://i.picsum.photos/id/1014/200/200.jpg" alt="Avatar" class="rounded-full w-20 h-20 border-2 border-gray-300 dark:border-gray-600"/>
</div>
<p class="text-center text-gray-500 dark:text-gray-400">Random Avatar</p>
</div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Register</button>
</form>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-center">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Login</a></p>
</div>
</div>Componenti correlati
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 uno stile glassmorphism, una combinazione di colori del tono della terra e il supporto del tema scuro. Progettato per le piattaforme di social media, con un layout semplice ed elementi minimi. Utilizza Tailwind CSS per lo stile e include segnaposto di immagini di esempio.
Modulo di iscrizione
Un elegante componente del modulo di registrazione in modalità oscura che utilizza Tailwind CSS, con campi per le informazioni sull'utente e un design reattivo.