Formulaire de connexion Skeuomorphic
Un composant de formulaire de connexion skeuomorphe avec une palette de couleurs en niveaux de gris et une complexité complexe, conçu pour un site Web de portfolio. Il est réactif et prend en charge le thème sombre.
HTML Code
<div class="min-h-screen bg-gray-200 flex items-center justify-center dark:bg-gray-900">
<div class="bg-white p-10 rounded-lg shadow-xl w-96 dark:bg-gray-800">
<h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">Login</h2>
<form>
<div class="mb-5">
<label for="email" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Email</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="[email protected]">
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Password</label>
<input type="password" id="password" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="********">
</div>
<button type="submit" class="w-full bg-gray-700 text-white py-3 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
Login
</button>
</form>
<p class="text-center text-gray-600 mt-6 text-sm dark:text-gray-400">
Don't have an account? <a href="#" class="text-gray-700 hover:underline dark:text-gray-300">Sign Up</a>
</p>
</div>
</div>Composants associés
Formulaire de connexion rétro
Un composant de formulaire de connexion de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre, conçu à l’aide de Tailwind CSS.
Formulaire de connexion minimaliste
Un formulaire de connexion minimaliste pour les sites e-commerce, avec prise en charge du responsive design et du mode sombre. Utilise un schéma de couleurs analogue. Pas de JavaScript.
Composant du formulaire de connexion
Un composant de formulaire de connexion complexe et réactif avec des influences Earth Tones, Material Design, adapté aux sites Web d’entreprise/d’entreprise, et inclut la prise en charge du mode sombre.