Formulaire de connexion e-commerce minimaliste
Un formulaire de connexion au design minimaliste et plat aux couleurs pastel, conçu pour les sites e-commerce. Il est simple, réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
HTML Code
<div
class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900"
>
<div
class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
>
<h2
class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6"
>
Login
</h2>
<form>
<div class="mb-4">
<label
for="email"
class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
>
Email Address
</label>
<input
type="email"
id="email"
name="email"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter your email"
/>
</div>
<div class="mb-6">
<label
for="password"
class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
>
Password
</label>
<input
type="password"
id="password"
name="password"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
class="w-full bg-pastel-blue text-black py-2 px-4 rounded-md hover:bg-pastel-darker-blue focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200"
>
Login
</button>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">
Don't have an account? <a href="#" class="text-pastel-blue hover:underline">Sign Up</a>
</p>
</div>
</div>
</div>Composants associés
Composant de formulaire de connexion organique
Un composant de formulaire de connexion complexe et réactif avec un style de design organique inspiré de la nature et une palette de couleurs sourdes, adapté aux plateformes musicales et audio. Inclut la prise en charge du mode sombre.
Composant du formulaire de connexion
Un composant de formulaire de connexion simple et réactif avec une esthétique cyberpunk et des accents néon pastel, conçu pour les marques de mode/beauté. Inclut la prise en charge du mode sombre.
Composant du formulaire de connexion
Un composant de formulaire de connexion propre, inspiré du code, avec des polices monospace et des couleurs neutres froides, adapté aux plateformes de marché. Comprend une réactivité complète et la prise en charge du mode sombre.