Formulaire d’inscription Skeuomorphic
Formulaire d’inscription skeuomorphe avec palette de couleurs monochromatiques, conçu pour une utilisation professionnelle/d’entreprise avec prise en charge du mode sombre et réactivité à l’aide de Tailwind CSS. Pas de JavaScript.
HTML Code
<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>Composants associés
Formulaire d’inscription pour brutalisme
Formulaire d’inscription Composant avec un design brutaliste, une palette de couleurs triadique et une complexité simple, adapté à un tableau de bord. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif conçu avec un style skeuomorphe, utilisant une palette de couleurs monochromatiques et adapté aux expériences de commerce électronique. Il prend en charge le mode sombre et comprend des fonctions de saisie interactives pour l’enregistrement des utilisateurs.
Composant du formulaire d’inscription
Un composant de formulaire d’inscription simple et réactif avec des effets de néon/lueur, une palette de couleurs neutres froides et une prise en charge du mode sombre, adapté aux sites Web liés à la photographie.