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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
<div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-2xl w-full max-w-md
transform transition-all duration-300 ease-in-out
hover:shadow-3xl hover:-translate-y-1
ring-4 ring-indigo-300/50 dark:ring-gray-600/50
relative overflow-hidden">
<!-- Skeuomorphic "Glass" Effect Overlay -->
<div class="absolute inset-0 bg-white/20 dark:bg-gray-800/20 backdrop-blur-sm rounded-xl
transform -rotate-3 translate-x-2 translate-y-2 opacity-0 group-hover:opacity-100 transition duration-500 ease-in-out"></div>
<h2 class="text-3xl font-extrabold text-gray-800 dark:text-white text-center mb-8
drop-shadow-lg [text-shadow:0px_2px_4px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Welcome Back!
</h2>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
[text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Email
</label>
<div class="relative">
<input type="email" id="email" name="email" autocomplete="email"
class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
focus:ring-2 focus:ring-indigo-400 focus:border-transparent
transition duration-200 ease-in-out
[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
placeholder="[email protected]">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 10.49l7.997-4.606A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
<path d="M18 8.118l-8 4.615-8-4.615V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
</svg>
</div>
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
[text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Password
</label>
<div class="relative">
<input type="password" id="password" name="password" autocomplete="current-password"
class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
focus:ring-2 focus:ring-indigo-400 focus:border-transparent
transition duration-200 ease-in-out
[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
placeholder="••••••••">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H7V7a3 3 0 016 0v2h-2V7a1 1 0 00-1-1zm-4 8h8v7H6v-7z"></path>
</svg>
</div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox"
class="h-4 w-4 text-indigo-600 dark:text-indigo-400 rounded
focus:ring-indigo-500 dark:focus:ring-indigo-300
ring-offset-white dark:ring-offset-gray-700
border-gray-300 dark:border-gray-600
cursor-pointer
[box-shadow:0px_1px_2px_rgba(0,0,0,0.1)] dark:[box-shadow:0px_1px_2px_rgba(0,0,0,0.4)]">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg
text-lg font-semibold text-white
bg-gradient-to-r from-indigo-500 to-purple-500
hover:from-indigo-600 hover:to-purple-600
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-gray-300
transition duration-200 ease-in-out
transform active:scale-98 active:shadow-md
[box-shadow:0px_4px_8px_rgba(0,0,0,0.2),inset_0px_1px_0px_rgba(255,255,255,0.4)]
dark:[box-shadow:0px_4px_8px_rgba(0,0,0,0.6),inset_0px_1px_0px_rgba(255,255,255,0.1)]">
Sign In
</button>
</div>
</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="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Sign Up
</a>
</p>
</div>
</div>
</div>Composants associés
Formulaire de connexion brutaliste
Un composant de formulaire de connexion simple, de style brutaliste, conçu pour les applications technologiques/SaaS, avec un contraste élevé, une typographie audacieuse et une palette de couleurs analogue avec une réactivité totale et une prise en charge du mode sombre.
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.
Composant du formulaire de connexion
Un composant de formulaire de connexion minimaliste conçu avec une palette de couleurs triadique adaptée à la présentation de portfolios avec prise en charge du mode sombre.