Componente del modulo di registrazione
Un modulo di registrazione reattivo con design del neumorfismo, combinazione di colori analoga e supporto per la modalità oscura, costruito con Tailwind CSS per scopi di social media.
Codice HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-sm p-8 rounded-xl bg-gray-100 dark:bg-gray-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
<form>
<div class="mb-5">
<label for="username" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Username</label>
<input type="text" id="username" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your username">
</div>
<div class="mb-5">
<label for="email" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" id="password" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your password">
</div>
<button type="submit" class="w-full px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 shadow-neumorphism-light dark:shadow-neumorphism-dark">Register</button>
</form>
<div class="mt-6 text-center text-gray-700 dark:text-gray-300">
Already have an account? <a href="#" class="font-medium text-blue-500 hover:underline">Login</a>
</div>
</div>
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
}
.shadow-inner-neumorphism-light {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-inner-neumorphism-dark {
box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
}
</style>Componenti correlati
Modulo di iscrizione Componente - Musica/Audio a tema
Un componente del modulo di registrazione pulito e minimalista con uno stile tipografico svizzero/internazionale e una combinazione di colori autunnali, progettato per piattaforme musicali/audio. È completamente reattivo, supporta la modalità oscura e utilizza l'HTML semantico.
Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con un design scheumorfico, una combinazione di colori tenui e il supporto della modalità scura, adatto per siti Web di viaggi e turismo. Imita elementi del mondo reale come i pulsanti in rilievo e i campi di input incassati.
modulo di registrazione-ecommerce-tailwind
Componente del modulo di registrazione dal design piatto minimalista per l'e-commerce che utilizza Tailwind CSS con supporto per la modalità reattiva e scura, con una combinazione di colori blu-arancione complementare.