Componente Componenti di autenticazione
Componente di autenticazione per l'e-commerce con design 3D, combinazione di colori triadica, interazioni complesse, supporto per modalità reattiva e oscura.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center items-center py-12 sm:px-6 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-xl">
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
Create your account
</h2>
</div>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-xl">
<div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-lg rounded-lg sm:px-10 transform perspective-1000 rotateX-10">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-300">
Or continue with
</span>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3">
<div>
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.01 c0 4.41 2.866 8.165 6.839 9.488.599.11.819-.26.819-.58v-1.9c-2.77.6-3.338-1.37-3.338-1.37-.454-1.156-1.11-1.464-1.11-1.464-.906-.619.069-.607.069-.607 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.116-4.555-4.93 0-1.09.39-1.984 1.024-2.675-.102-.253-.446-1.266.098-2.652 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0110 4.815c.85.004 1.705.115 2.504.337 1.909-1.29 2.747-1.022 2.747-1.022.546 1.386.202 2.398.1 2.652.635.691 1.024 1.585 1.024 2.675 0 3.822-2.339 4.675-4.569 4.92.359.306.675.91.675 1.838v2.734c0 .32-.21.694-.825.578C17.103 18.163 20 14.407 20 10.01A9.996 9.996 0 0010 0z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
<div>
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"></path>
</svg>
</a>
</div>
<div>
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.71c0-2.51 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<div class="mt-6">
<form action="#" method="POST" 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">
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white">
</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">
<input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white">
</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 focus:ring-indigo-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-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Sign up
</button>
</div>
</form>
</div>
</div>
</div>
</div>Componenti correlati
Componente Componenti di autenticazione
Un semplice componente di autenticazione progettato con lo stile del neumorfismo e una combinazione di colori monocromatica, adatto per le interfacce dei social media. Include un modulo di accesso con campi e-mail e password, un pulsante di accesso e un link di registrazione. Il componente è reattivo e supporta la modalità scura.
Componenti di autenticazione
Un componente di accesso e registrazione reattivo e interattivo progettato con microinterazioni, utilizzando colori complementari per un'interfaccia di contenuto del blog con supporto per temi scuri.
Componente Componenti di autenticazione
Un componente di autenticazione reattivo progettato per l'interfaccia utente in modalità oscura, con un modulo di accesso e iscrizione con stile CSS Tailwind.