Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif avec un design skeuomorphe, une palette de couleurs sourdes et une prise en charge du mode sombre, adapté aux sites Web de voyage et de tourisme. Il imite des éléments du monde réel tels que des boutons en relief et des champs de saisie encastrés.
HTML Code
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 font-sans">
<div class="w-full max-w-lg bg-gray-100 dark:bg-gray-700 rounded-3xl shadow-xl p-8 transform transition-all duration-300 ease-in-out
dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.6),_inset_0_-2px_4px_rgba(255,255,255,0.05),_0_8px_16px_rgba(0,0,0,0.5)]
shadow-[inset_0_2px_4px_rgba(255,255,255,0.8),_inset_0_-2px_4px_rgba(0,0,0,0.1),_0_8px_16px_rgba(0,0,0,0.2)]">
<h2 class="text-3xl font-extrabold text-gray-700 dark:text-gray-200 mb-8 text-center drop-shadow-sm">
<span class="block">Embark on Your Journey</span>
<span class="block text-sm font-normal text-gray-500 dark:text-gray-400 mt-2">Register for an unforgettable experience</span>
</h2>
<form class="space-y-6">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Full Name</label>
<input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name"
class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
bg-gray-200 dark:bg-gray-800 shadow-inner
shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
aria-label="Full Name">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email"
class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
bg-gray-200 dark:bg-gray-800 shadow-inner
shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
aria-label="Email Address">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Password</label>
<input type="password" id="password" name="password" placeholder="••••••••"
class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
bg-gray-200 dark:bg-gray-800 shadow-inner
shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
aria-label="Password">
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••"
class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
bg-gray-200 dark:bg-gray-800 shadow-inner
shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
aria-label="Confirm Password">
</div>
<div class="relative flex items-start">
<div class="flex items-center h-5">
<input id="terms" name="terms" type="checkbox"
class="focus:ring-blue-500 h-5 w-5 text-blue-600 rounded drop-shadow-sm
bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-600
shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_inset_0_-1px_2px_rgba(255,255,255,0.6)]
dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.7),_inset_0_-1px_2px_rgba(255,255,255,0.05)]
appearance-none checked:bg-blue-500 checked:border-transparent cursor-pointer
transition-all duration-200 ease-in-out">
<div class="absolute w-5 h-5 flex items-center justify-center pointer-events-none">
<svg class="h-4 w-4 text-white opacity-0 transform scale-0 transition-all duration-200 ease-in-out pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="ml-3 text-sm">
<label for="terms" class="font-medium text-gray-700 dark:text-gray-300 drop-shadow-sm">
I agree to the <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md transition duration-200">Terms and Conditions</a>
</label>
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-6 border border-transparent rounded-2xl text-lg font-bold text-white
bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400
shadow-xl
shadow-[0_4px_8px_rgba(0,0,0,0.2),_inset_0px_2px_4px_rgba(255,255,255,0.4),_inset_0px_-2px_4px_rgba(0,0,0,0.2)]
dark:shadow-[0_4px_8px_rgba(0,0,0,0.6),_inset_0px_2px_4px_rgba(255,255,255,0.1),_inset_0px_-2px_4px_rgba(0,0,0,0.4)]
active:shadow-inner active:bg-blue-700 dark:active:bg-blue-800
transform active:scale-98 transition-all duration-200 ease-in-out drop-shadow-sm">
Register Now
</button>
</div>
</form>
</div>
</div>
<style>
/* Custom style for the checkbox checkmark animation */
input[type='checkbox']:checked + div > svg {
opacity: 1;
transform: scale(1);
}
</style>Composants associés
Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif de style Glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou, prenant en charge le mode sombre et affichant des images de remplacement.
Formulaire d’inscription au skeuomorphisme Niveaux de gris
Un composant de formulaire d’inscription skeuomorphe en niveaux de gris pour les portefeuilles, avec une complexité modérée, un design réactif et un support de thème sombre, pas de Javascript. Images de picsum.photos et randomuser.me utilisées.
formulaire-d-inscription-ecommerce-tailwind
Composant de formulaire d’inscription minimaliste pour le commerce électronique à l’aide de Tailwind CSS avec prise en charge du mode réactif et sombre, avec une palette de couleurs bleu-orange complémentaire.