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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<div class="h-48 w-full md:w-48 bg-gradient-to-br from-gray-400 to-gray-600 dark:from-gray-700 dark:to-gray-900 flex items-center justify-center">
<svg class="h-24 w-24 text-gray-200 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</div>
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-gray-500 dark:text-gray-400 font-semibold">Authentication</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Simple Authentication Form</a>
<p class="mt-2 text-gray-500 dark:text-gray-400">A simple authentication form with a minimalist 3D-like design.</p>
<div class="mt-4">
<input type="text" placeholder="Username" class="mt-1 block w-full rounded-md bg-gray-100 dark:bg-gray-700 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 dark:focus:bg-gray-800 dark:text-white">
<input type="password" placeholder="Password" class="mt-4 block w-full rounded-md bg-gray-100 dark:bg-gray-700 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 dark:focus:bg-gray-800 dark:text-white">
</div>
<div class="mt-6">
<button class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600">Sign In</button>
</div>
</div>
</div>
</div>
</div>
Composants associés
Luxury_Premium_Sweet_Dashboard_Auth_Component
Un composant d’authentification complexe, de style luxe/premium pour un tableau de bord, doté d’une palette de couleurs douces avec du rose bonbon et du vert menthe, et d’une réactivité totale avec prise en charge du mode sombre.
Composant d’authentification Skeuomorphism
Composant d’authentification Skeuomorphism avec schéma de couleurs analogue et mise en page complexe à des fins de blog/contenu, prise en charge des thèmes réactifs et sombres.
Composants d’authentification
Un composant d’authentification réactif conçu dans l’interface utilisateur du mode sombre, avec des formulaires de connexion et d’inscription avec des images de remplacement.