Cerca componenti

Categorie

Componenti Modulo di accesso

Modulo di accesso

Modulo per l'autenticazione dell'utente

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.

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

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

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

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

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

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

Modulo di accesso al neumorfismo

Un componente Modulo di accesso progettato con lo stile Neumorfismo, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
        <h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
        <form>
            <div class="mb-4">
                <label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
            </div>
            <div class="mt-6">
                <button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
            </div>
        </form>
    </div>
</div>

Un componente del modulo di accesso reattivo progettato con lo stile Glassmorphism, che incorpora effetti di vetro smerigliato, effetti di sfocatura e supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 shadow-lg rounded-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">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="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" 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="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="password" id="password" placeholder="********" required>
            </div>
            <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-300" type="submit">Login</button>
        </form>
        <p class="text-center text-gray-600 dark:text-gray-400 mt-4">Or log in with</p>
        <div class="flex justify-around mt-4">
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=1" alt="Google"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=2" alt="Facebook"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=3" alt="Twitter"></a>
        </div>
    </div>
</div>

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 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 bg-opacity-40 backdrop-blur-lg rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
                <input class="block w-full px-4 py-2 border rounded-md bg-transparent border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="username" placeholder="Enter your username" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="block w-full px-4 py-2 border rounded-md bg-transparent border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password" placeholder="Enter your password" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out">
                    <label class="ml-2 text-sm text-gray-600 dark:text-gray-300">Remember me</label>
                </div>
                <a href="#" class="text-sm text-blue-600 hover:underline dark:text-blue-400">Forgot password?</a>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Login</button>
        </form>
        <p class="mt-6 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Sign up</a></p>
    </div>
</div>

Modulo di accesso retrò

Un componente del modulo di accesso in stile retrò/vintage con effetti reattivi e supporto per temi scuri, progettato utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-800">
    <div class="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-center text-purple-700 dark:text-purple-300 mb-6">Login to Your Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-200 mb-1" for="email">Email</label>
                <input type="email" id="email" placeholder="[email protected]" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-200 mb-1" for="password">Password</label>
                <input type="password" id="password" placeholder="********" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
            </div>
            <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded-lg transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-800">Login</button>
        </form>
        <p class="text-center text-gray-600 dark:text-gray-400 mt-4">
            <a href="#" class="hover:underline">Forgot Password?</a>
        </p>
        <div class="flex items-center justify-center mt-4">
            <img src="https://picsum.photos/40/40" alt="Placeholder Avatar" class="rounded-full mr-2" />
            <span class="text-gray-700 dark:text-gray-300">Login with Random User</span>
        </div>
    </div>
</div>