Composant du formulaire de connexion
Un composant de formulaire de connexion simple conçu dans un style brutaliste avec des tons de terre, adapté à des fins de blog/contenu, et optimisé pour les thèmes clairs et sombres.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-brown-500 shadow-lg rounded-lg p-8 max-w-md w-full">
<h2 class="text-3xl font-bold text-white text-center mb-6">Login</h2>
<form>
<div class="mb-4">
<label class="block text-white text-sm font-bold mb-2" for="username">Username</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring focus:ring-brown-300" id="username" type="text" placeholder="Enter your username" required />
</div>
<div class="mb-6">
<label class="block text-white text-sm font-bold mb-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 bg-white dark:bg-gray-800 focus:outline-none focus:ring focus:ring-brown-300" id="password" type="password" placeholder="Enter your password" required />
</div>
<div class="flex items-center justify-between">
<button class="bg-brown-600 hover:bg-brown-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
</div>
</form>
</div>
</div>Composants associés
Formulaire de connexion Neumorphism
Un composant de formulaire de connexion de style Neumorphism pour un tableau de bord, avec un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant du formulaire de connexion
Un composant de formulaire de connexion réactif stylisé avec glassmorphism, avec des éléments translucides avec des effets de flou et la prise en charge du thème sombre.
Formulaire de connexion Neumorphism
Un composant de formulaire de connexion conçu avec le style Neumorphism, avec un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.