Composant de connexion/inscription
Un composant de connexion/inscription simple, propre et minimaliste avec un style de typographie suisse/international et une palette de couleurs joyeuses, conçu pour les sites Web d’entreprise. Il est entièrement réactif et inclut la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen flex items-center justify-center p-4 bg-pink-50 dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-lg lg:max-w-xl transition-all duration-300 transform hover:scale-[1.01] hover:shadow-2xl">
<div class="md:flex">
<div class="w-full p-8 px-6 md:px-8">
<div class="text-center mb-8">
<h2 class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight tracking-tighter mb-2 transition-colors duration-300">
Welcome
</h2>
<p class="text-gray-600 dark:text-gray-400 text-lg transition-colors duration-300">
Join or sign in to continue
</p>
</div>
<div class="relative flex flex-col items-center justify-center mb-6">
<div class="absolute inset-x-0 top-1/2 h-px bg-gray-200 dark:bg-gray-700 w-full transform -translate-y-1/2"></div>
<button class="relative px-4 py-2 bg-pink-100 dark:bg-gray-700 text-pink-700 dark:text-gray-300 rounded-full text-sm font-semibold transition-colors duration-300 z-10">
Log In
</button>
<button class="relative px-4 py-2 ml-4 bg-mint-green-100 dark:bg-gray-700 text-mint-green-700 dark:text-gray-300 rounded-full text-sm font-semibold transition-colors duration-300 z-10">
Sign Up
</button>
</div>
<form>
<div class="mb-6">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-green-500 focus:border-mint-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition-colors duration-300 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
</div>
<div class="mb-6">
<div class="flex justify-between items-center">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Password</label>
<a href="#" class="text-sm text-pink-600 dark:text-pink-400 hover:underline transition-colors duration-300">Forgot Password?</a>
</div>
<input type="password" id="password" name="password" placeholder="••••••••" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-green-500 focus:border-mint-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition-colors duration-300 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
</div>
<button type="submit" class="w-full py-3 px-6 bg-mint-green-500 text-white font-semibold rounded-md shadow-lg hover:bg-mint-green-600 focus:outline-none focus:ring-2 focus:ring-mint-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:-translate-y-0.5">
Login
</button>
<p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
Don't have an account? <a href="#" class="font-medium text-pink-600 dark:text-pink-400 hover:underline transition-colors duration-300">Sign up now</a>
</p>
</form>
</div>
</div>
</div>
</div>
<style>
/* Custom colors for 'candy/sweet' palette if not directly in Tailwind config */
/* Add to your tailwind.config.js for full integration: */
/*
module.exports = {
theme: {
extend: {
colors: {
'pink-50': '#FFF0F5', // Lavender Blush
'pink-100': '#FFE4E1', // Misty Rose
'pink-600': '#FF69B4', // Hot Pink
'pink-700': '#C71585', // Medium Violet Red
'mint-green-100': '#F0FFF4', // Mint Cream
'mint-green-500': '#98FB98', // Pale Green
'mint-green-600': '#3CB371' // Medium Sea Green
}
}
},
// ... other config
}
*/
</style>Composants associés
Monospace_Dating_Login_Signup_Component
Un composant de connexion/inscription simple et réactif pour les plateformes de rencontres/sociales avec un design monospace inspiré du code. Dispose d’un monochrome noir et blanc avec une couleur d’accent vive et d’une prise en charge complète du mode sombre.
RetroVibrantCryptoAuth
Un composant de connexion/inscription complexe, d’inspiration rétro avec des couleurs vives, conçu pour les applications de crypto-monnaie/blockchain, avec une mise en page réactive et une prise en charge du mode sombre.
Composant de connexion/inscription - Dégradé de tons de terre
Un composant de connexion/inscription réactif conçu pour les plateformes d’emploi/carrière, avec des dégradés de tons de terre et des transitions fluides. Inclut la prise en charge du mode sombre et du HTML sémantique.