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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-800">
<div class="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full dark:bg-gray-800">
<h2 class="text-2xl font-bold text-center text-purple-700 dark:text-purple-300 mb-6">Login to Your Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-200 mb-1" for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-200 mb-1" for="password">Password</label>
<input type="password" id="password" placeholder="********" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded-lg transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-800">Login</button>
</form>
<p class="text-center text-gray-600 dark:text-gray-400 mt-4">
<a href="#" class="hover:underline">Forgot Password?</a>
</p>
<div class="flex items-center justify-center mt-4">
<img src="https://picsum.photos/40/40" alt="Placeholder Avatar" class="rounded-full mr-2" />
<span class="text-gray-700 dark:text-gray-300">Login with Random User</span>
</div>
</div>
</div>Composants associés
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
Formulaire de connexion skeuomorphique pour les médias sociaux avec prise en charge des couleurs pastel, réactif et du mode sombre. La forme présente un effet 3D subtil sur les entrées et les boutons, imitant les éléments physiques. Des ombres et des dégradés sont utilisés pour améliorer l’aspect skeuomorphe. Les entrées ont une ombre douce et les boutons ont une apparence cliquable en relief. La palette de couleurs pastel passe en douceur à une version plus sombre et atténuée en mode sombre, ce qui permet de maintenir la lisibilité et le confort visuel. La conception réactive garantit la facilité d’utilisation sur tous les appareils.
Composant du formulaire de connexion
Un formulaire de connexion simple et réactif conçu avec un style skeuomorphe qui imite les éléments du monde réel à l’aide d’une palette de couleurs vives. Il convient aux interfaces de médias sociaux et prend en charge le mode sombre.