Componenti Modulo di accesso Modulo di accesso al neumorfismo

Modulo di accesso al neumorfismo

Un componente del modulo di accesso in stile neumorfismo per una dashboard, caratterizzato da un design reattivo e supporto per temi scuri utilizzando Tailwind CSS.

Anteprima

Codice HTML

<div class="flex items-center justify-center min-h-screen"> <div class="w-full max-w-md p-8 m-4 bg-gray-200 rounded-xl shadow-2xl dark:bg-gray-800 dark:text-white"> <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login</h2> <form class="mt-8 space-y-6"> <div> <label for="email" class="sr-only">Email address</label> <input id="email" name="email" type="email" autocomplete="email" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="Email address"> </div> <div> <label for="password" class="sr-only">Password</label> <input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="Password"> </div> <div class="flex items-center justify-between"> <div class="flex items-center"> <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800"> <label for="remember-me" class="block ml-2 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-500"> Forgot your password? </a> </div> </div> <div> <button type="submit" class="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800"> <span class="absolute inset-y-0 left-0 flex items-center pl-3"> <svg class="w-5 h-5 text-indigo-500 group-hover:text-indigo-400 dark:text-indigo-400 dark:group-hover:text-indigo-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 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2h2V7A3 3 0 008 7v2h2V7a3 3 0 013 0z" clip-rule="evenodd" /> </svg> </span> Sign in </button> </div> </form> </div></div>

Componenti correlati

Componente Modulo di accesso

Un componente del modulo di accesso semplice e reattivo con colori neutri caldi, design incentrato sulla microinterazione e supporto per la modalità scura, adatto per sistemi di prenotazione e prenotazione.

Aperto

Componente Modulo di accesso

Un componente del modulo di accesso progettato con Glassmorphism, con elementi traslucidi simili al vetro smerigliato ed effetti reattivi, che supporta temi scuri utilizzando Tailwind CSS.

Aperto

Modulo di accesso Brutalist

Un modulo di accesso complesso e reattivo progettato in uno stile brutalista con toni della terra, su misura per applicazioni di e-commerce, con supporto per la modalità oscura.

Aperto