ArtDecoAuthComponent
Composant d’authentification d’inspiration Art déco pour les applications médicales/de santé, avec des motifs géométriques, des couleurs à contraste élevé et une réactivité totale avec prise en charge du mode sombre. Convient pour les formulaires de connexion ou d’inscription.
HTML Code
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 font-sans">
<div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-2xl rounded-lg overflow-hidden border-t-8 border-b-8 border-teal-500 dark:border-teal-700 transform transition-all duration-300 scale-95 md:scale-100 ease-in-out hover:shadow-3xl hover:scale-100">
<div class="p-8 pb-0 text-center">
<svg class="mx-auto h-16 w-16 text-teal-600 dark:text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.92 12c0 3.072 1.354 5.961 3.75 8.016A12.001 12.001 0 0012 21c3.072 0 5.961-1.354 8.016-3.75A12.001 12.001 0 0021.08 12c0-3.072-1.354-5.961-3.75-8.016z" />
</svg>
<h2 class="mt-4 text-3xl font-extrabold text-gray-900 dark:text-white tracking-wider uppercase leading-tight font-serif">
<span class="text-teal-600 dark:text-teal-500">Pharma</span>Login
</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Your health, simplified.
</p>
</div>
<div class="p-8 pt-6">
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<div class="mt-1 relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
</div>
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full py-3 pl-10 pr-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="[email protected]">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<div class="mt-1 relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
</div>
<input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full py-3 pl-10 pr-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="••••••••">
</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-teal-600 dark:text-teal-500 focus:ring-teal-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-teal-600 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-400 hover:underline">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-bold text-white bg-teal-600 hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 uppercase tracking-widest transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
Sign In
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">
Don't have an account?
<a href="#" class="font-medium text-teal-600 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-400 hover:underline">
Sign Up for free
</a>
</p>
</div>
</div>
<div class="relative bg-gradient-to-r from-teal-500 to-teal-700 dark:from-teal-700 dark:to-teal-900 h-16 flex items-center justify-center">
<div class="absolute w-full h-full opacity-10 dark:opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23000\' fill-opacity=\'0.05\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6zm30 30v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zm0 4v-4H4v4H0v2h4v4h2v-4h4v-2H6zM42 0h-2v4h-4v2h4v4h2V6h4V4h-4zM24 6v4h-4v-4h-4V0h4v4h4V0h4v4h4V0h-4v6h-4zm0-6V0h-2v4h-4v2h4v4h2V6h4V4h-4zM0 6h4V0h-4v6zM42 6h4V0h-4v6zM0 42h4V36H0v6zM42 42h4V36h-4v6zM24 42h4V36h-4v6zM6 42h4V36H6v6zM36 42h4V36h-4v6zM48 6h4V0h-4v6zM54 0h-2v4h-4v2h4v4h2V6h4V4h-4zM54 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM48 42h4V36h-4v6zM54 42h4V36h-4v6zM48 36h4v6h-4v-6zM36 0h4V6h-4V0zM60 0h-4v6h4V0zM60 36h-4v6h4V36zM36 36h4v6h-4v-6zM6 0h4V6H6V0zM6 36h4v6H6v-6zM24 0h4V6h-4V0zM24 36h4V42h-4V36zM30 6h4V0h-4v6zM30 36h4V42h-4V36zM18 0h4V6h-4V0zM18 36h4V42h-4V36zM12 0h4V6h-4V0zM12 36h4V42h-4V36z%27/%3E%3C/g%3E%3C/svg%3E'); display: block;"></div>
<p class="relative z-10 text-xs text-white uppercase tracking-widest">
Secure & Compliant Access
</p>
</div>
</div>
</div>
Composants associés
MinimalisteAuthForm
Un composant de formulaire de connexion réactif et minimaliste conçu pour les portfolios ou les applications Web. Il présente une esthétique de design plat avec une palette de couleurs complémentaire : le bleu est utilisé pour les éléments interactifs en mode clair et l’orange est utilisé en mode sombre. Le formulaire comprend des champs pour l’adresse e-mail et le mot de passe, une option « Se souvenir de moi », un lien « Mot de passe oublié », une option pour s’inscrire et l’intégration de la connexion sociale (par exemple, GitHub). Il prend en charge le thème sombre et est construit uniquement avec HTML et Tailwind CSS pour une intégration facile.
Composants d’authentification
Composant de composants d’authentification avec conception 3D, schéma de couleurs monochromatique, complexité simple et objectif du portefeuille. Conception réactive avec prise en charge du thème sombre.
Skeuomorphic_Monochromatic_Auth_E-commerce
Un composant d’authentification complexe, skeuomorphe et monochromatique pour les applications de commerce électronique, doté de plusieurs éléments interactifs et d’un design réactif avec prise en charge du mode sombre. Il imite les interfaces du monde réel avec des commandes numériques.