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.
Codice HTML
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
<div class="relative p-8 rounded-lg shadow-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg w-full max-w-md border border-gray-200 dark:border-gray-700">
<div class="absolute inset-0 -z-10 rounded-lg bg-gradient-to-br from-stone-300 to-stone-500 opacity-30 dark:from-stone-700 dark:to-stone-900"></div>
<h2 class="text-3xl font-bold text-center text-stone-800 dark:text-stone-100 mb-6">Register</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
</div>
<div class="mb-4">
<label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
</div>
<div class="mb-6">
<label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
</div>
<button type="submit" class="w-full bg-stone-600 dark:bg-stone-700 text-white p-3 rounded-lg font-semibold hover:bg-stone-700 dark:hover:bg-stone-800 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
Register
</button>
</form>
<p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
Already have an account? <a href="#" class="text-stone-800 dark:text-stone-200 font-semibold hover:underline">Login here</a>
</p>
</div>
</div>
Componenti correlati
Componente del modulo di registrazione
Un modulo di registrazione minimalista con una combinazione di colori in scala di grigi e ricchi elementi interattivi, reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.
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 modulo di registrazione minimalista e piatto con effetti reattivi e supporto per temi scuri, utilizzando Tailwind CSS.