Modulo di accesso

Componente Modulo di accesso

Modulo di accesso reattivo con Material Design, combinazione di colori triadica e supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="px-8 py-6 mt-4 text-left bg-white dark:bg-gray-800 shadow-lg rounded-lg">
    <h3 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login to your account</h3>
      <div class="mt-4">
          <div>
              <label class="block text-gray-700 dark:text-gray-200" for="email">Email</label>
              <input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
          </div>
          <div class="mt-4">
              <label class="block text-gray-700 dark:text-gray-200" for="password">Password</label>
              <input type="password" placeholder="Password" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
          </div>
          <div class="flex items-baseline justify-between">
              <button class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900 dark:bg-blue-700 dark:hover:bg-blue-900">Login</button>
              <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline focus:text-blue-800">Forgot password?</a>
          </div>
      </div>
  </div>
</div>

Un modulo di accesso semplice e reattivo progettato con uno stile scheumorfico che imita gli elementi del mondo reale utilizzando una combinazione di colori vivaci. È adatto per le interfacce dei social media e supporta la modalità oscura.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-800 dark:to-purple-900">  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Welcome Back!</h2>    <div class="mt-6">      <div class="mb-4">        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>        <input type="email" id="email" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required/>      </div>      <div class="mb-6">        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>        <input type="password" id="password" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="••••••••" required/>      </div>      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">Login</button>    </div>    <div class="mt-4 text-center">      <img src="https://picsum.photos/50/50" alt="Login Illustration" class="mx-auto rounded-full"/>    </div>    <div class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">      Don't have an account? <a href="#" class="text-blue-500 dark:text-blue-400">Sign up</a>    </div>  </div> </div>

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.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-brown-500 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-3xl font-bold text-white text-center mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-white text-sm font-bold mb-2" for="username">Username</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring focus:ring-brown-300" id="username" type="text" placeholder="Enter your username" required />
            </div>
            <div class="mb-6">
                <label class="block text-white text-sm font-bold mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring focus:ring-brown-300" id="password" type="password" placeholder="Enter your password" required />
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-brown-600 hover:bg-brown-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
            </div>
        </form>
    </div>
</div>

Modulo di accesso Skeuomorphic

Un componente del modulo di accesso scheumorfico con una combinazione di colori in scala di grigi e una complessità complessa, progettato per un sito Web di portfolio. È reattivo e supporta il tema scuro.

Apri anteprima

                <div class="min-h-screen bg-gray-200 flex items-center justify-center dark:bg-gray-900">
  <div class="bg-white p-10 rounded-lg shadow-xl w-96 dark:bg-gray-800">
    <h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">Login</h2>
    <form>
      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="[email protected]">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="********">
      </div>
      <button type="submit" class="w-full bg-gray-700 text-white py-3 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
        Login
      </button>
    </form>
    <p class="text-center text-gray-600 mt-6 text-sm dark:text-gray-400">
      Don't have an account? <a href="#" class="text-gray-700 hover:underline dark:text-gray-300">Sign Up</a>
    </p>
  </div>
</div>

Componente Modulo di accesso 3D

Un modulo di accesso reattivo con un design 3D, una combinazione di colori triadici e il supporto per il tema scuro. Adatto per le interfacce dei social media.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg transform transition-all duration-500 hover:scale-105 p-8 rounded-lg border border-gray-200 dark:border-gray-700">
        <div class="text-center mb-6">
            <img class="w-16 h-16 rounded-full mx-auto mb-2" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome Back!</h2>
            <p class="text-gray-600 dark:text-gray-400">Please login to your account</p>
        </div>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-400" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-400" type="password" id="password" placeholder="••••••••" required>
            </div>
            <button class="w-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white font-semibold p-3 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out" type="submit">Login</button>
            <div class="text-center mt-4">
                <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
                <p class="text-gray-600 dark:text-gray-400"><a href="#" class="text-blue-500 hover:underline">Forgot your password?</a></p>
            </div>
        </form>
    </div>
</div>

Componente Modulo di accesso

Un componente del modulo di accesso minimalista progettato con una combinazione di colori triadica adatta per la presentazione del portfolio con supporto per la modalità oscura.

Apri anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-sm">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-center">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-600 dark:text-gray-400 mb-2" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-indigo-600" type="email" id="email" required placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-gray-600 dark:text-gray-400 mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-indigo-600" type="password" id="password" required placeholder="********">
            </div>
            <div class="flex items-center justify-between">
                <label class="inline-flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600 dark:bg-gray-600 rounded">
                    <span class="ml-2 text-gray-700 dark:text-gray-200">Remember Me</span>
                </label>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 text-sm">Forgot Password?</a>
            </div>
            <div class="mt-8">
                <button class="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
            </div>
        </form>
        <div class="mt-6 text-center">
            <p class="text-gray-700 dark:text-gray-400 text-sm">Don't have an account? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">Sign Up</a></p>
        </div>
    </div>
</div>

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.

Apri anteprima

                <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>

Modulo di accesso Skeuomorphic

Un semplice modulo di accesso Skeuomorphic con colori triadici per uno scopo di dashboard, con design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="min-h-screen flex items-center justify-center p-4 dark:bg-gray-900 bg-gray-100">
  <div class="max-w-sm w-full bg-white dark:bg-gray-800 p-8 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" class="shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark appearance-none rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your username">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" class="shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark appearance-none rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline shadow-neumorphic-light dark:shadow-neumorphic-dark dark:bg-blue-700 dark:hover:bg-blue-800">
          Sign In
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href="#">
          Forgot Password?
        </a>
      </div>
    </form>
  </div>
</div>

<style>
/* Basic neumorphic effect styles */
/* Light mode shadows */
.shadow-neumorphic-light {
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
}

.shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}

/* Dark mode shadows */
.dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 15px #1c2027, -8px -8px 15px #2e3643;
}

.dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1c2027, inset -5px -5px 10px #2e3643;
}

/* Triadic color examples (adjust as needed) */
/* Using shades of blue, yellow/orange, and red/pink for a triadic feel */
.bg-blue-600 { background-color: #2563eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.text-blue-600 { color: #2563eb; }
.hover\:text-blue-800:hover { color: #1e40af; }

.dark .bg-blue-700 { background-color: #1d4ed8; }
.dark .hover\:bg-blue-800:hover { background-color: #1e40af; }
.dark .text-blue-400 { color: #60a5fa; }
.dark .hover\:text-blue-500:hover { color: #3b82f6; }

/* Add subtle background colors for light/dark mode that aren't pure white/black to enhance neumorphism */
.bg-gray-100 { background-color: #f0f2f5; }
.dark .bg-gray-900 { background-color: #272c35; }
.bg-gray-200 { background-color: #e5e7eb; }
.dark .bg-gray-700 { background-color: #374151; }
.bg-white { background-color: #ffffff; }
.dark .bg-gray-800 { background-color: #1f2937; }

.text-gray-700 { color: #374151; }
.dark .text-gray-300 { color: #d1d5db; }
.text-gray-800 { color: #1f2937; }
.dark .text-white { color: #ffffff; }
.text-gray-200 { color: #e5e7eb; }

</style>

Componente Modulo di accesso

Un componente del modulo di accesso reattivo con glassmorphism, con elementi traslucidi con effetti di sfocatura e supporto per temi scuri.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-md p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-center mb-6 text-gray-800 dark:text-gray-200">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="password" id="password" placeholder="********" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="mr-2 leading-tight">
                    <span class="text-sm text-gray-700 dark:text-gray-300">Remember Me</span>
                </div>
                <a href="#" class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400">Forgot Password?</a>
            </div>
            <div>
                <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Login</button>
            </div>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400">Sign Up</a></p>
    </div>
</div>

Componente Modulo di accesso

Componente modulo di accesso con design 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Apri anteprima

                ```html
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-10 rounded-lg shadow-lg w-96 transform transition duration-500 hover:scale-105">
    <h2 tabindex="0" class="text-3xl font-bold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
    <form>
      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="Enter your password">
      </div>
      <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
        Login
      </button>
    </form>
    <div class="mt-6 text-center">
      <a href="#" class="text-sm text-blue-600 hover:underline dark:text-blue-400">Forgot Password?</a>
    </div>
  </div>
</div>
```

Categorie