Componenti Modulo di accesso Componente Modulo di accesso

Componente Modulo di accesso

Un componente del modulo di accesso reattivo con supporto per la modalità scura, utilizzando colori pastello, adatto per siti Web di notizie/giornalismo. Garantisce una riduzione dell'affaticamento degli occhi con la sua interfaccia utente scura.

Anteprima

Codice HTML

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <img class="mx-auto h-12 w-auto" src="https://picsum.photos/id/1018/100/100" alt="News Outlet Logo">
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">
      Sign in to your account
    </h2>
    <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400 max-w">
      Or
      <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300">
        create a new account
      </a>
    </p>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-xl rounded-lg sm:px-10 border border-gray-200 dark:border-gray-700">
      <form class="space-y-6" action="#" method="POST">
        <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 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
          </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 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
          </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-purple-600 focus:ring-purple-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:checked:bg-purple-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-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-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-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-offset-gray-800">
            Sign in
          </button>
        </div>
      </form>

      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300 dark:border-gray-600"></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-400">
              Or continue with
            </span>
          </div>
        </div>

        <div class="mt-6 grid grid-cols-2 gap-3">
          <div>
            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
              <img class="h-5 w-5" src="https://www.svgrepo.com/show/303108/github-icon-svg-logo.svg" alt="GitHub">
              <span class="ml-2">GitHub</span>
            </a>
          </div>
          <div>
            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
              <img class="h-5 w-5" src="https://www.svgrepo.com/show/303112/google-icon-svg-logo.svg" alt="Google">
              <span class="ml-2">Google</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Componenti correlati

Componente Modulo di accesso

Modulo di accesso scheumorfico per i social media con colori pastello, reattivo e supporto per la modalità scura. Il modulo presenta un sottile effetto 3D su input e pulsanti, imitando gli elementi fisici. Ombre e sfumature vengono utilizzate per migliorare la sensazione di scheumorfo. Gli input hanno un'ombra morbida e i pulsanti hanno un aspetto rialzato e cliccabile. La combinazione di colori pastello passa senza problemi a una versione più scura e tenue in modalità scura, mantenendo la leggibilità e il comfort visivo. Il design reattivo garantisce l'usabilità su tutti i dispositivi.

Aperto

Componente Modulo di accesso

Un semplice componente del modulo di accesso progettato in uno stile brutalista con toni della terra, adatto per blog/contenuti e ottimizzato sia per temi chiari che scuri.

Aperto

Componente RetroLoginFormComponent

Modulo di accesso reattivo, a tema scuro supportato, retrò/vintage con toni della terra, adatto per siti Web aziendali/aziendali. Utilizza elementi minimi.

Aperto