Cerca componenti

Categorie

Componenti Componenti di autenticazione

Componenti di autenticazione

Componenti relativi all'autenticazione e alla sicurezza degli utenti

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.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-8 w-80 neumorphism">
        <h2 class="text-center text-xl font-semibold text-gray-800 dark:text-gray-200">Login</h2>
        <form class="mt-6">
            <div class="mb-4">
                <label class="block mb-2 text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block mb-2 text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="••••••••" required>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-600">Log In</button>
        </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:underline">Sign up</a></p>
        <div class="flex justify-center mt-4">
            <img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        </div>
        <img src="https://picsum.photos/200/100" alt="Random Image" class="mt-4 rounded-lg shadow-lg w-full h-auto">
    </div>
</div>

<style>
.neumorphism {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2), 
                -8px -8px 16px rgba(255, 255, 255, 0.7);
    border-radius: 20px;
}
</style>

Componenti di autenticazione

Un componente di autenticazione complesso e reattivo con un design brutale con un tema scuro, adatto per applicazioni di social media.

Aperto Anteprima

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg shadow-xl w-full max-w-lg">
        <h1 class="text-3xl font-bold text-white mb-4">Join Our Community</h1>
        <div class="mb-4">
            <label for="email" class="block text-sm font-medium text-white">Email</label>
            <input type="email" id="email" class="mt-1 block w-full p-2 bg-gray-800 dark:bg-gray-800 text-white border border-gray-700 rounded-md focus:ring focus:ring-yellow-400" placeholder="[email protected]" required>
        </div>
        <div class="mb-4">
            <label for="password" class="block text-sm font-medium text-white">Password</label>
            <input type="password" id="password" class="mt-1 block w-full p-2 bg-gray-800 dark:bg-gray-800 text-white border border-gray-700 rounded-md focus:ring focus:ring-yellow-400" placeholder="********" required>
        </div>
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <input type="checkbox" id="remember" class="h-4 w-4 text-yellow-500 border-gray-300 rounded focus:ring focus:ring-yellow-400">
                <label for="remember" class="ml-2 block text-sm text-white">Remember me</label>
            </div>
            <a href="#" class="text-sm text-yellow-400 hover:underline">Forgot Password?</a>
        </div>
        <button class="w-full py-2 px-4 bg-yellow-500 hover:bg-yellow-400 text-white font-bold rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-300">Sign In</button>
        <div class="my-4 text-center"><span class="text-white">or</span></div>
        <button class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 flex items-center justify-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2"> Sign in with Google
        </button>
        <p class="mt-4 text-sm text-white text-center">
            Don't have an account? 
            <a href="#" class="text-yellow-400 hover:underline">Sign Up</a>
        </p>
    </div>
</div>

Componente Componenti di autenticazione

Un componente di autenticazione in modalità oscura reattivo per i cruscotti, che utilizza i toni della terra per un'estetica naturale.

Aperto Anteprima

                <div class="min-h-screen bg-gray-800 text-gray-100 flex items-center justify-center">
    <div class="bg-gray-900 dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm">
        <h1 class="text-2xl font-semibold mb-4 text-center">Sign In</h1>
        <form>
            <div class="mb-4">
                <label class="block text-sm mb-2" for="email">Email</label>
                <input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="email" id="email" placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-sm mb-2" for="password">Password</label>
                <input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="password" id="password" placeholder="••••••••">
            </div>
            <button class="w-full bg-earth-500 text-white py-2 rounded focus:outline-none hover:bg-earth-600 transition duration-200" type="submit">Log In</button>
        </form>
        <p class="mt-4 text-sm text-center">
            <a href="#" class="text-earth-400 hover:underline">Forgot Password?</a>
        </p>
        <div class="flex items-center justify-center mt-6">
            <span class="w-1/4 border-b border-gray-600"></span>
            <span class="mx-2 text-gray-400">or</span>
            <span class="w-1/4 border-b border-gray-600"></span>
        </div>
        <button class="flex items-center justify-center w-full bg-earth-500 text-white py-2 mt-4 rounded focus:outline-none hover:bg-earth-600 transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
            Sign in with Google
        </button>
    </div>
</div>

Componenti di autenticazione retrò vintage

Un complesso componente di autenticazione reattiva con un design retrò/vintage, adatto per una dashboard di visualizzazione e controllo dei dati. Presenta colori triadici ed elementi interattivi.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
    <div class="bg-gray-800 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center mb-6">Welcome Back!</h2>
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium mb-2">Email</label>
                <input type="email" class="block w-full p-2 border border-gray-600 rounded-md bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="[email protected]" required>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium mb-2">Password</label>
                <input type="password" class="block w-full p-2 border border-gray-600 rounded-md bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Your password" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" id="remember-me">
                    <label for="remember-me" class="ml-2 text-sm">Remember me</label>
                </div>
                <a href="#" class="text-sm text-blue-400 hover:underline">Forgot password?</a>
            </div>
            <button type="submit" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-md transition-colors">Login</button>
        </form>
        <div class="mt-6 text-center">
            <p class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></p>
        </div>
        <div class="mt-6 flex items-center justify-between border-t border-gray-600 pt-4">
            <div class="flex items-center">
                <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full border border-gray-600">
                <span class="ml-2 text-sm">John Doe</span>
            </div>
            <a href="#" class="text-sm text-blue-400 hover:underline">Settings</a>
        </div>
    </div>
</div>

Componente di autenticazione

Componente di autenticazione in stile neumorfismo per l'e-commerce, con una combinazione di colori triadica e un layout semplice. Supporta la modalità oscura ed è reattivo. Utilizza Tailwind CSS. Niente JavaScript.

Aperto Anteprima

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="p-8 bg-white dark:bg-gray-700 rounded-xl shadow-lg dark:shadow-none">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-900 dark:text-white">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-900 dark:text-white">
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-start">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:bg-gray-600 dark:border-gray-500">
          </div>
          <div class="ml-2 text-sm">
            <label for="remember_me" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
        </div>
      </div>
      <div class="mt-6">
        <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-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

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.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white text-center">Welcome Back!</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="••••••••" required />
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" id="remember" class="mr-2 leading-tight">
                    <label for="remember" class="text-gray-700 dark:text-gray-300">Remember me</label>
                </div>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Forgot Password?</a>
            </div>
            <button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Login</button>
        </form>
        <div class="mt-6 text-center">
            <span class="text-gray-700 dark:text-gray-300">Don't have an account? </span>
            <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Sign Up</a>
        </div>
    </div>
</div>

Componenti di autenticazione

Componente dei componenti di autenticazione con design 3D, combinazione di colori monocromatici, complessità semplice e scopo del portfolio. Design reattivo con supporto per temi scuri.

Aperto Anteprima

                
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <div class="h-48 w-full md:w-48 bg-gradient-to-br from-gray-400 to-gray-600 dark:from-gray-700 dark:to-gray-900 flex items-center justify-center">
          <svg class="h-24 w-24 text-gray-200 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        </div>
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-gray-500 dark:text-gray-400 font-semibold">Authentication</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Simple Authentication Form</a>
        <p class="mt-2 text-gray-500 dark:text-gray-400">A simple authentication form with a minimalist 3D-like design.</p>
        <div class="mt-4">
          <input type="text" placeholder="Username" class="mt-1 block w-full rounded-md bg-gray-100 dark:bg-gray-700 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 dark:focus:bg-gray-800 dark:text-white">
          <input type="password" placeholder="Password" class="mt-4 block w-full rounded-md bg-gray-100 dark:bg-gray-700 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 dark:focus:bg-gray-800 dark:text-white">
        </div>
        <div class="mt-6">
          <button class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600">Sign In</button>
        </div>
      </div>
    </div>
  </div>
</div>

Componente di autenticazione

Un componente di autenticazione reattivo progettato in uno stile scheumorfico con una combinazione di colori in scala di grigi adatta per siti Web aziendali/aziendali.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-8 space-y-6 bg-white shadow-md rounded-xl dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center">Please sign in to your account</p>
        <form class="space-y-4">
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email Address</label>
                <input type="email" id="email" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="[email protected]" required />
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your password" required />
            </div>
            <button type="submit" class="w-full px-4 py-2 font-bold text-white transition-colors duration-200 bg-gray-700 rounded-md hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Sign In</button>
        </form>
        <p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
        <div class="mt-4 text-center">
            <img src="https://picsum.photos/100/100" alt="User Avatar" class="inline-block rounded-full" />
            <p class="mt-2 text-gray-600 dark:text-gray-300">Username</p>
        </div>
    </div>
</div>

Componente Componenti di autenticazione

Un componente di autenticazione progettato in Neumorphic per l'e-commerce con colori vivaci, supporto per temi scuri e design reattivo.

Aperto Anteprima

                <div class="flex justify-center items-center min-h-screen bg-gray-800 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-8 w-80 neumorphic">
        <h2 class="text-2xl font-bold text-center text-vibrant">Login</h2>
        <form class="mt-4">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="[email protected]">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="••••••••">
            </div>
            <button type="submit" class="w-full bg-vibrant text-white p-2 rounded-lg hover:shadow-lg transition ease-in-out duration-150">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-vibrant">Sign Up</a></p>
        </div>
        <hr class="my-4 border-gray-300 dark:border-gray-600">
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-400">or login with</p>
            <div class="flex justify-center mt-2">
                <img src="https://picsum.photos/30" alt="Google Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Facebook Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Twitter Logo" class="rounded-full mx-2">
            </div>
        </div>
    </div>
</div>
<style>
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css";

.neumorphic {
    background: #e0e0e0;
    border-radius: 20px;
    box-shadow: 8px 8px 15px rgba(226, 226, 226, 0.3), -8px -8px 15px rgba(255, 255, 255, 0.3);
}

.dark.neumorphic {
    background: #434343;
    box-shadow: 8px 8px 15px rgba(0,0,0,0.5), -8px -8px 15px rgba(255,255,255,0.1);
}

.text-vibrant {
    color: #ff4081; /* You can change this color based on your vibrant color scheme */
}
</style>

Componente Componenti di autenticazione

Componente di autenticazione con modalità oscura, effetti reattivi e nessuna dipendenza da JavaScript.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-900">
  <div class="bg-gray-800 p-10 rounded-lg shadow-xl w-full max-w-md">
    <h1 class="text-white text-center text-2xl font-bold mb-6">Login</h1>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-400 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow appearance-nonse border border-gray-700 rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-700" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-400 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" class="shadow appearance-none border border-gray-700 rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline 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-2 px-4 rounded focus:outline-none focus:shadow-outline">Sign In</button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-700" href="#">Forgot Password?</a>
      </div>
    </form>
  </div>
</div>