Composant du formulaire de connexion
Un composant de formulaire de connexion skeuomorphe conçu avec des couleurs vives et une complexité modérée, adapté à un portfolio.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 max-w-md w-full">
<h2 class="text-3xl font-bold text-center text-vibrant-600 dark:text-vibrant-300 mb-6">Login</h2>
<img src="https://picsum.photos/200/100" alt="Decorative Header Image" class="rounded-lg w-full mb-4" />
<form>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" name="email" class="border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:outline-none focus:ring focus:ring-vibrant-300 dark:focus:ring-vibrant-500 w-full" required />
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input type="password" id="password" name="password" class="border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:outline-none focus:ring focus:ring-vibrant-300 dark:focus:ring-vibrant-500 w-full" required />
</div>
<button type="submit" class="bg-vibrant-600 dark:bg-vibrant-500 text-white font-bold py-2 rounded-lg w-full hover:bg-vibrant-700 dark:hover:bg-vibrant-400 transition duration-300 ease-in-out">Log In</button>
</form>
<div class="flex items-center justify-between mt-4">
<a href="#" class="text-sm text-vibrant-600 dark:text-vibrant-300 hover:underline">Forgot Password?</a>
<a href="#" class="text-sm text-vibrant-600 dark:text-vibrant-300 hover:underline">Sign Up</a>
</div>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mx-auto mt-4" />
</div>
</div>Composants associés
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 3D
Un composant de formulaire de connexion 3D réactif conçu pour les sites Web d’entreprise, intégrant la prise en charge des tons de terre et du mode sombre.
Playful_Sports_Login_Form
Un composant de formulaire de connexion ludique et joyeux avec des éléments arrondis et des couleurs de terre, conçu pour les applications de sport et de fitness. Il est entièrement réactif et prend en charge le mode sombre.