Cerca componenti

Categorie

Componenti Componenti di autenticazione

Componenti di autenticazione

Componenti relativi all'autenticazione e alla sicurezza degli utenti

3D_Auth_Agriculture_Simple

Un componente di autenticazione semplice e reattivo con un'estetica di design 3D e una combinazione di colori ad alto contrasto, adatto per siti Web di agricoltura/allevamento. Dispone del supporto per la modalità oscura.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-lime-100 to-green-200 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-700 rounded-xl shadow-2xl p-8 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-3xl-lime dark:hover:shadow-3xl-green perspective-1000">

    <!-- 3D Effect Background Elements (pseudo-elements via custom utility styles or more divs for actual 3D) -->
    <div class="absolute inset-0 rounded-xl overflow-hidden pointer-events-none">
        <!-- Top-left abstract element -->
        <div class="absolute -top-10 -left-10 w-40 h-40 bg-lime-300/50 dark:bg-green-700/50 rounded-full blur-xl opacity-70 transform rotate-45 perspective-700 origin-center filter drop-shadow-lg"></div>
        <!-- Bottom-right abstract element -->
        <div class="absolute -bottom-10 -right-10 w-52 h-52 bg-green-300/50 dark:bg-lime-700/50 rounded-full blur-xl opacity-70 transform -rotate-30 perspective-800 origin-center filter drop-shadow-lg"></div>
    </div>

    <!-- Main Content Layer -->
    <div class="relative z-10 space-y-6">
      <div class="text-center">
        <h2 class="text-3xl font-extrabold text-lime-800 dark:text-lime-300 transform translate-z-10 tracking-tight drop-shadow-sm">Welcome to AgroConnect</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-300 transform translate-z-5">Cultivating connections for a greener future.</p>
      </div>

      <form class="space-y-4">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
          <div class="mt-1 relative">
            <input type="email" id="email" name="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 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:border-lime-500 sm:text-sm transform translate-z-0 transition-all duration-200 focus:scale-[1.01]">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Password</label>
          <div class="mt-1 relative">
            <input type="password" id="password" name="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 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:border-lime-500 sm:text-sm transform translate-z-0 transition-all duration-200 focus:scale-[1.01]">
          </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-lime-600 focus:ring-lime-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">Remember me</label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-lime-600 hover:text-lime-500 dark:text-lime-400 dark:hover:text-lime-300 transform translate-z-2 transition-transform duration-200 hover:scale-105">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-base font-semibold text-white bg-lime-600 hover:bg-lime-700 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-green-500 transform translate-z-10 transition-all duration-300 ease-out active:translate-y-0.5 active:shadow-md hover:scale-[1.02]">
            Sign In
          </button>
        </div>
      </form>

      <div class="text-center text-sm text-gray-600 dark:text-gray-300">
        Not a member? <a href="#" class="font-medium text-lime-600 hover:text-lime-500 dark:text-lime-400 dark:hover:text-lime-300 transform translate-z-2 transition-transform duration-200 hover:scale-105">Sign up now</a>
      </div>
    </div>
  </div>
</div>

<!-- To achieve actual 3D, you'd typically rely on CSS `transform` properties like `translate3d`, `rotateX`, `rotateY`, `perspective`. -->
<!-- For this example, '3D' implies a sense of depth through shadows, layered elements, and subtle transforms. -->
<!-- Custom shadow for hover effect (typically in tailwind.config.js) -->
<!-- 
  extend: {
    boxShadow: {
      '3xl-lime': '0 0 40px 10px rgba(139, 197, 63, 0.5)',
      '3xl-green': '0 0 40px 10px rgba(45, 212, 96, 0.5)',
    }
  }
-->

Auth_Component_Watercolor_Artistic

Un componente di autenticazione semplice e reattivo progettato con un'estetica morbida, ad acquerello/artistica. Dispone di colori neutri caldi e supporto per la modalità scura, adatto per siti Web di eventi o conferenze.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-orange-50 to-amber-100 dark:from-stone-900 dark:to-stone-800 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-stone-800 rounded-3xl shadow-xl overflow-hidden md:p-8 p-6 relative group transform hover:scale-105 transition-all duration-300 ease-in-out border border-amber-200 dark:border-stone-700">
    <div class="absolute inset-0 bg-gradient-to-br from-amber-50/50 via-white/0 to-orange-100/50 dark:from-stone-700/50 dark:via-transparent dark:to-stone-600/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl pointer-events-none"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-extrabold text-amber-800 dark:text-amber-100 mb-4 text-center pb-2 border-b border-amber-100 dark:border-stone-700 leading-tight tracking-wide">
        Artist's Brush Login
      </h2>
      <p class="text-sm text-center text-stone-600 dark:text-stone-300 mb-8">
        Welcome back to the creative canvas.
      </p>

      <form>
        <div class="mb-6">
          <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-200 mb-2">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full px-4 py-2 border border-amber-300 dark:border-stone-600 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none bg-amber-50 dark:bg-stone-700 text-stone-800 dark:text-stone-50 placeholder-stone-400 dark:placeholder-stone-500 transition duration-200 shadow-sm">
        </div>

        <div class="mb-6">
          <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-200 mb-2">Password</label>
          <input type="password" id="password" name="password" placeholder="••••••••" class="w-full px-4 py-2 border border-amber-300 dark:border-stone-600 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none bg-amber-50 dark:bg-stone-700 text-stone-800 dark:text-stone-50 placeholder-stone-400 dark:placeholder-stone-500 transition duration-200 shadow-sm">
        </div>

        <div class="flex items-center justify-between mb-8">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-amber-300 rounded dark:border-stone-600 dark:bg-stone-700">
            <label for="remember-me" class="ml-2 block text-sm text-stone-700 dark:text-stone-300">Remember me</label>
          </div>
          <a href="#" class="text-sm text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 font-medium transition duration-200">Forgot Password?</a>
        </div>

        <button type="submit" class="w-full bg-amber-600 hover:bg-amber-700 text-white font-semibold py-3 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-stone-800 transition duration-300 ease-in-out transform hover:-translate-y-0.5 shadow-md hover:shadow-lg">
          Login to Canvas
        </button>
      </form>

      <p class="mt-8 text-center text-sm text-stone-600 dark:text-stone-300">
        Don't have an account yet? 
        <a href="#" class="font-medium text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 transition duration-200">Sign up for free</a>
      </p>
    </div>
  </div>
</div>

Luxury_Premium_Sweet_Dashboard_Auth_Component

Un componente di autenticazione complesso, in stile lusso/premium per una dashboard, caratterizzato da una tavolozza di colori dolci con rosa bubblegum e verde menta e piena reattività con supporto per la modalità scura.

Aperto Anteprima

                <div class="min-h-screen p-4 flex items-center justify-center bg-gradient-to-br from-pink-100 to-green-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden grid grid-cols-1 lg:grid-cols-2 transform hover:scale-[1.01] transition-all duration-300 ease-in-out">
    <!-- Left Panel: Brand & Imagery -->
    <div class="relative p-8 lg:p-12 hidden lg:flex flex-col justify-between items-center bg-pink-300 dark:bg-gray-950 text-white dark:text-gray-100 overflow-hidden rounded-l-3xl">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-400 to-green-400 opacity-60 dark:opacity-40 rounded-l-3xl"></div>
      <div class="relative z-10 text-center flex flex-col justify-between items-center h-full">
        <h1 class="text-4xl lg:text-5xl font-extrabold tracking-tight mb-4 drop-shadow-lg font-serif">
          SweetMetrics
        </h1>
        <p class="text-lg lg:text-xl font-light leading-relaxed mb-8">
          Your Dashboard to a Sweeter Future. Unlock insights with elegance.
        </p>
        <img src="https://picsum.photos/400/300?random=1" alt="Dashboard illustration" class="w-full max-w-sm rounded-lg object-cover shadow-lg transform -rotate-3 hover:rotate-0 transition-transform duration-300 ease-in-out">
        <div class="mt-8 text-sm opacity-80">
          © 2023 All Rights Reserved.
        </div>
      </div>
    </div>

    <!-- Right Panel: Authentication Forms -->
    <div class="flex flex-col p-8 sm:p-10 lg:p-12 space-y-8 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
      <div class="text-center">
        <h2 class="text-3xl lg:text-4xl font-bold mb-2 font-serif">Welcome Back!</h2>
        <p class="text-md text-gray-500 dark:text-gray-400">Sign in to continue to your dashboard.</p>
      </div>

      <!-- Tabs for Login/Register -->
      <div class="flex justify-center mb-6">
        <button class="px-6 py-3 rounded-full text-lg font-semibold bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-white shadow-md transform hover:scale-105 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-600 mr-2">
          Login
        </button>
        <button class="px-6 py-3 rounded-full text-lg font-semibold bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 shadow-sm transform hover:scale-105 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600">
          Register
        </button>
      </div>

      <!-- Login Form -->
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
          <div class="relative">
            <input type="email" id="email" name="email" autocomplete="email" required class="w-full px-5 py-3 border border-pink-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent outline-none bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 transition-colors duration-200 ease-in-out pl-12">
            <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-pink-400 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg>
          </div>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
          <div class="relative">
            <input type="password" id="password" name="password" autocomplete="current-password" required class="w-full px-5 py-3 border border-pink-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent outline-none bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 transition-colors duration-200 ease-in-out pl-12">
            <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-pink-400 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"></path></svg>
          </div>
        </div>

        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-pink-600 border-gray-300 rounded focus:ring-pink-500 dark:bg-gray-600 dark:border-gray-500 dark:checked:bg-pink-600">
            <label for="remember-me" class="ml-2 block text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="font-medium text-pink-600 dark:text-pink-400 hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-200 ease-in-out">
            Forgot your password?
          </a>
        </div>

        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-lg font-bold text-white bg-green-400 hover:bg-green-500 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-500 transition-all duration-300 ease-in-out transform hover:-translate-y-1">
          Sign In
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </button>
      </form>

      <div class="relative flex flex-col justify-center text-center text-xs text-gray-500 dark:text-gray-400 uppercase">
        <span class="block w-full border-t border-gray-200 dark:border-gray-600 absolute top-1/2 left-0 right-0 z-0"></span>
        <span class="relative z-10 bg-white dark:bg-gray-800 px-4 inline-block mx-auto">Or continue with</span>
      </div>
      
      <!-- Social Logins -->
      <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
        <button class="flex items-center justify-center w-full sm:w-auto px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-xl 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition-transform duration-200 ease-in-out">
          <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12.0003 12.72L16.2903 16.03C15.2203 18.01 13.0603 19.33 10.5303 19.33C6.73031 19.33 3.50031 16.32 3.50031 12.00C3.50031 7.68 6.73031 4.67 10.5303 4.67C12.5903 4.67 14.1903 5.37 15.4203 6.46L18.4203 3.42C16.4803 1.5 13.7903 0.330002 10.5303 0.330002C4.78031 0.330002 0.0003125 5.11 0.0003125 10.86C0.0003125 16.61 4.78031 21.39 10.5303 21.39C16.0703 21.39 20.0003 17.51 20.0003 11.23C20.0003 10.45 19.9303 9.71 19.8103 9H10.5303V12.72Z"></path></svg>
          Google
        </button>
        <button class="flex items-center justify-center w-full sm:w-auto px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-xl 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition-transform duration-200 ease-in-out">
          <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.0298 5.7291 21.1278 10.5 21.8906V14.125H7.5V12H10.5V10C10.5 7.97125 11.8364 6.2235 14.5 6.2235C15.3411 6.2235 16.1952 6.34734 17 6.47167V9H15C13.6738 9 13.5 9.68062 13.5 10.5V12H16.5L16 14.125H13.5V21.8906C18.2709 21.1278 22 17.0298 22 12Z"></path></svg>
          Facebook
        </button>
      </div>

      <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? 
        <a href="#" class="font-medium text-pink-600 dark:text-pink-400 hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-200 ease-in-out">Sign up now</a>.
      </p>
    </div>
  </div>
</div>

Retro_Healthcare_Auth_Component

Un componente di autenticazione reattivo con un design retrò/vintage, combinazione di colori tenui, su misura per applicazioni mediche/sanitarie, incluso il supporto della modalità scura.

Aperto Anteprima

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-mono">
  <div class="max-w-md w-full bg-slate-100 dark:bg-slate-800 shadow-lg rounded-lg border border-slate-300 dark:border-slate-700 overflow-hidden transform transition-all duration-300 hover:scale-[1.01]">
    <div class="relative bg-gradient-to-tr from-rose-400 to-indigo-500 p-8 text-center text-white dark:from-rose-600 dark:to-indigo-800">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-textile.png')] opacity-20"></div>
      <h2 class="relative text-3xl sm:text-4xl font-bold mb-2 tracking-wide uppercase retro-shadow text-pink-100">MediNet</h2>
      <p class="relative text-sm sm:text-base text-gray-100">Secure Healthcare Portal</p>
    </div>
    <div class="p-6 sm:p-8">
      <h3 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-6 text-center">Provider Login</h3>
      <form>
        <div class="mb-4">
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full px-4 py-2 border border-slate-400 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-200 appearance-none placeholder-gray-400 dark:placeholder-gray-500">
        </div>
        <div class="mb-6">
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
          <input type="password" id="password" name="password" placeholder="• • • • • • • •" class="w-full px-4 py-2 border border-slate-400 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-200 appearance-none placeholder-gray-400 dark:placeholder-gray-500">
        </div>
        <div class="flex items-center justify-between mb-6">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-200">
            <label for="remember_me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium transition duration-200">Forgot Password?</a>
        </div>
        <div>
          <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-800 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transition duration-300 ease-in-out transform hover:-translate-y-0.5 shadow-md retro-button-shadow">
            <span class="tracking-wider">SIGN IN</span>
          </button>
        </div>
      </form>
      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Need an account? 
          <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium transition duration-200">Register Now</a>
        </p>
      </div>
    </div>
  </div>

  <style>
    .retro-shadow {
      text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1), 8px 8px 0px rgba(0, 0, 0, 0.05);
    }
    .dark .retro-shadow {
      text-shadow: 4px 4px 0px rgba(255, 255, 255, 0.05), 8px 8px 0px rgba(255, 255, 255, 0.02);
    }
    .retro-button-shadow {
      box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.15);
    }
    .dark .retro-button-shadow {
      box-shadow: 5px 5px 0px 0px rgba(255, 255, 255, 0.1);
    }
  </style>
</div>

Playful_Manufacturing_Authentication_Component

Un componente di autenticazione giocoso e allegro progettato per applicazioni manifatturiere/industriali, caratterizzato da elementi arrotondati, una combinazione di colori analoga e una reattività completa con supporto della modalità oscura.

Aperto Anteprima

                <div class="min-h-screen bg-blue-100 flex items-center justify-center p-4 dark:bg-slate-900 overflow-hidden">
  <div class="bg-white rounded-3xl shadow-xl p-8 max-w-sm w-full transform transition-all duration-300 dark:bg-slate-800 sm:max-w-md lg:max-w-xl xl:max-w-2xl sm:p-10 lg:p-12 xl:p-16 relative overflow-hidden">
    
    <!-- Background Blob / Shape -->
    <div class="absolute -top-16 -right-16 w-48 h-48 bg-teal-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 transform animate-pulse dark:bg-teal-600 lg:w-64 lg:h-64"></div>
    <div class="absolute -bottom-16 -left-16 w-32 h-32 bg-sky-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 transform animate-pulse animation-delay-700 dark:bg-sky-600 lg:w-48 lg:h-48"></div>
    <div class="absolute top-1/2 left-1/2 -ml-24 -mt-24 w-40 h-40 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 transform animate-pulse animation-delay-1400 dark:bg-indigo-500 lg:w-56 lg:h-56"></div>

    <div class="relative z-10">
      <div class="text-center mb-8">
        <svg class="mx-auto h-16 w-16 text-sky-500 mb-4 dark:text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.25 21l3.5-3.5L16.25 21l-0.5-4h4.5l-2.5-2.5L21 9.25l-4-0.5V4l-4.5 2.5L9.25 4l-0.5 4h-4.5l2.5 2.5L4 16.25l4-0.5z" />
        </svg>
        <h2 class="text-3xl font-extrabold text-blue-900 mb-2 dark:text-white sm:text-4xl">
          Welcome, Maker!
        </h2>
        <p class="text-gray-600 dark:text-gray-300">
          Let's get this factory humming.
        </p>
      </div>

      <div class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
          <div class="mt-1 relative rounded-lg shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M2.003 5.884L10 11.297l7.997-5.413a1 1 0 00-.775-1.78l-7.222 4.888-7.222-4.888a1 1 0 00-.775 1.78z" />
                <path fill-rule="evenodd" d="M18 8.118V16a2 2 0 01-2 2H4a2 2 0 01-2-2V8.118l8 5.413 8-5.413z" clip-rule="evenodd" />
              </svg>
            </div>
            <input type="email" id="email" class="focus:ring-sky-500 focus:border-sky-500 block w-full pl-10 pr-2 py-3 rounded-lg border-gray-300 dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:placeholder-gray-400 transition-colors duration-200" placeholder="[email protected]">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Password</label>
          <div class="mt-1 relative rounded-lg shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H4a2 2 0 00-2 2v4a2 2 0 002 2h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2V6a4 4 0 00-4-4zm3 8V6a3 3 0 10-6 0v2h6z" clip-rule="evenodd" />
              </svg>
            </div>
            <input type="password" id="password" class="focus:ring-sky-500 focus:border-sky-500 block w-full pl-10 pr-2 py-3 rounded-lg border-gray-300 dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:placeholder-gray-400 transition-colors duration-200" placeholder="Enter your password">
          </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-sky-600 focus:ring-sky-500 border-gray-300 rounded-md dark:border-slate-600 dark:bg-slate-700">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
              Remember Me
            </label>
          </div>
          <div class="text-sm">
            <a href="#" class="font-medium text-sky-600 hover:text-sky-500 dark:text-sky-400 dark:hover:text-sky-300 transition-colors duration-200">
              Forgot Password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-full shadow-sm text-lg font-bold text-white bg-teal-500 hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-600 transition-all duration-300 transform active:scale-95">
            <span class="mr-2">Login</span>
            <svg class="h-6 w-6 transform rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4h1V5L8 9" />
            </svg>
          </button>
        </div>

        <div class="relative">
          <div class="absolute inset-0 flex items-center" aria-hidden="true">
            <div class="w-full border-t border-gray-300 dark:border-slate-600"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white text-gray-500 dark:bg-slate-800 dark:text-gray-400">
              Or continue with
            </span>
          </div>
        </div>

        <div class="mt-6 grid grid-cols-2 gap-3">
          <div>
            <button class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-slate-700 dark:border-slate-600 dark:text-gray-200 dark:hover:bg-slate-600 transition-colors duration-200">
              <svg class="h-5 w-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.866 8.169 6.839 9.488.5.088.682-.217.682-.483 0-.237-.007-.866-.012-1.703-2.782.604-3.37-1.34-3.37-1.34-.454-1.157-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.004.07 1.532 1.028 1.532 1.028.89 1.527 2.336 1.085 2.9-.652.09-.65-.008-1.085-.015-1.339-2.22-.253-4.555-1.11-4.555-4.943 0-1.09.39-1.984 1.029-2.686-.103-.254-.447-1.272.097-2.659 0 0 .84-.27 2.75 1.025.798-.222 1.643-.333 2.48-.337.836.004 1.682.115 2.48.337 1.91-1.295 2.75-1.025 2.75-1.025.546 1.387.202 2.404.099 2.659.64.702 1.028 1.596 1.028 2.686 0 3.842-2.339 4.686-4.566 4.935.359.308.678.915.678 1.846 0 1.334-.012 2.413-.012 2.748 0 .269.176.575.687.487C17.135 18.165 20 14.417 20 10 20 4.477 15.523 0 10 0z" />
              </svg>
              GitHub
            </button>
          </div>

          <div>
            <button class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-slate-700 dark:border-slate-600 dark:text-gray-200 dark:hover:bg-slate-600 transition-colors duration-200">
              <svg class="h-5 w-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path d="M16.59 9.385l.019.25C16.899 15.42 13.916 20 8.796 20c-4.996 0-8.2-3.4-8.2-8a7.808 7.808 0 011.66-5.074l-1.424-1.396C.426 3.195 0 4.544 0 6c0 6.627 5.373 12 12 12 4.415 0 8.125-2.923 8.125-7.6h-3.535zm-2.094-1.417h-1.325V6.78h-1.02v1.188h-1.326v1.019h1.326v1.188h1.02V9.59h1.325V8.293zm-5.748-1.572c-.896 0-1.728-.2-2.302-.547-.584-.351-.876-.84-.876-1.468 0-.616.292-1.096.876-1.432.574-.336 1.406-.528 2.302-.528 1.054 0 1.95.276 2.688.828.738.552 1.107 1.344 1.107 2.376 0 1.012-.37 1.804-1.107 2.376-.738.572-1.634.828-2.688.828zm-.016-.016c.725 0 1.378-.18 1.902-.54.524-.36.786-.864.786-1.512 0-.636-.262-1.144-.786-1.524-.524-.38-.178-.58-.178-.58-.524-.38-1.176-.564-1.952-.564-.789 0-1.442.184-1.952.552-.51.368-.765.864-.765 1.488 0 .684.255 1.188.765 1.512.51.324 1.163.484 1.952.484z" />
              </svg>
              Google
            </button>
          </div>
        </div>

        <p class="text-center text-sm text-gray-600 dark:text-gray-300">
          Don't have an account yet? 
          <a href="#" class="font-medium text-sky-600 hover:text-sky-500 dark:text-sky-400 dark:hover:text-sky-300 transition-colors duration-200">
            Sign up now!
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for animation delays if needed, typically handled by Tailwind via postcss */
  .animation-delay-700 {
    animation-delay: 0.7s;
  }
  .animation-delay-1400 {
    animation-delay: 1.4s;
  }
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

Skeuomorphic_Auth_CRM_Component

Un componente di autenticazione complesso e reattivo per CRM/Business Tools, caratterizzato da uno stile di design scheumorfico con colori neutri freddi e supporto per la modalità scura.

Aperto Anteprima

                <div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="relative w-full max-w-md bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-xl border border-gray-200 dark:border-gray-700 p-8 sm:p-10 lg:p-12 transform perspective-1000 rotateX-5 overflow-hidden transition-all duration-500
      before:content-[''] before:absolute before:inset-0 before:rounded-3xl before:bg-gradient-to-br before:from-gray-100 before:via-gray-50 before:to-transparent before:opacity-20 before:pointer-events-none before:z-0
      dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-transparent dark:before:opacity-30">

    <!-- Top Skeuomorphic Element -->
    <div class="absolute -top-6 -left-6 w-24 h-24 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-full shadow-lg opacity-40 blur-sm"></div>
    <div class="absolute -bottom-6 -right-6 w-20 h-20 bg-gradient-to-tl from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-full shadow-lg opacity-40 blur-sm"></div>

    <div class="relative z-10">
      <div class="text-center mb-8">
        <svg class="mx-auto h-16 w-16 text-blue-600 dark:text-blue-400 drop-shadow-md brightness-150" 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="1.5" d="M9.75 17L9.22 17.53C8.618 18.132 8.618 19.102 9.22 19.704L14.77 25.254C15.372 25.856 16.342 25.856 16.944 25.254L22.494 19.704C23.096 19.102 23.096 18.132 22.494 17.53L21.964 17M15 15.75V9.75L15 6L18 3L21 6V9.75M9 15.75V9.75M3 15.75V9.75M12 15.75V9.75M6 15.75V9.75M12 6H15M6 6H9M18 9.75H21M3 9.75H6M9 9.75H12

Componente di autenticazione di lusso

Un componente di autenticazione elegante e sofisticato progettato per i marchi di moda e bellezza di lusso, caratterizzato da un'interfaccia ricca, layout reattivo e supporto per la modalità scura utilizzando una combinazione di colori analoga.

Aperto Anteprima

                <div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-xl overflow-hidden max-w-4xl w-full flex flex-col lg:flex-row transform transition-all duration-300 hover:shadow-3xl dark:border dark:border-gray-700">
    <!-- Left Section: Image and Slogan -->
    <div class="relative lg:w-1/2 overflow-hidden flex items-center justify-center p-6 lg:p-10 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900 dark:to-pink-900 border-b lg:border-r border-gray-100 dark:border-purple-800">
      <img src="https://picsum.photos/600/800?grayscale&blur=2" alt="Luxury Fashion" class="absolute inset-0 w-full h-full object-cover opacity-60 dark:opacity-40 transition-opacity duration-300">
      <div class="relative z-10 text-center text-gray-900 dark:text-white px-4 py-8 rounded-lg bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm dark:bg-black dark:bg-opacity-30">
        <h2 class="text-4xl lg:text-5xl font-bold mb-4 tracking-tight">Embrace Your Elegance</h2>
        <p class="text-lg lg:text-xl leading-relaxed italic">Discover exquisite collections crafted for timeless beauty and unparalleled style.</p>
        <div class="mt-8 flex justify-center space-x-4">
          <a href="#" class="text-gray-900 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 transform hover:scale-110 transition-transform duration-300">
            <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.886 8.438-9.879z" clip-rule="evenodd" /></svg>
          </a>
          <a href="#" class="text-gray-900 dark:text-gray-200 hover:text-pink-700 dark:hover:text-pink-300 transform hover:scale-110 transition-transform duration-300">
            <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048 1.05.056 1.405.123 1.748.213.688.181 1.255.426 1.71.681a3.07 3.07 0 011.086 1.086c.255.455.5.962.681 1.71.09.344.156.699.213 1.748.047 1.013.048 1.371.048 3.797s-.001 2.784-.048 3.797c-.056 1.05-.123 1.405-.213 1.748a3.07 3.07 0 01-.681 1.71 3.07 3.07 0 01-1.086 1.086c-.455.255-.962.5-1.71.681-.344.09-.699.156-1.748.213-1.013.047-1.371.048-3.797.048s-2.784-.001-3.797-.048c-1.05-.056-1.405-.123-1.748-.213a3.07 3.07 0 01-1.71-.681 3.07 3.07 0 01-1.086-1.086c-.255-.455-.5-.962-.681-1.71-.09-.344-.156-.699-.213-1.748C3.003 16.315 3 15.958 3 13.5s.002-2.784.048-3.797c.056-1.05.123-1.405.213-1.748a3.07 3.07 0 01.681-1.71 3.07 3.07 0 011.086-1.086c.455-.255.962-.5 1.71-.681.344-.09.699-.156 1.748-.213C9.557 2.003 9.918 2 12.315 2zm0 2.137c-2.002 0-2.274.004-3.067.04l-.566.027c-.41.02-.638.07-.797.135a1.59 1.59 0 00-.86.86c-.065.159-.115.387-.135.797l-.027.566c-.036.793-.04 1.065-.04 3.067s.004 2.274.04 3.067l.027.566c.02.41.07.638.135.797a1.59 1.59 0 00.86.86c.159.065.387.115.797.135l.566.027c.793.036 1.065.04 3.067.04s2.274-.004 3.067-.04l.566-.027c.41-.02.638-.07.797-.135a1.59 1.59 0 00.86-.86c.065-.159.115-.387.135-.797l.027-.566c.036-.793.04-1.065.04-3.067s-.004-2.274-.04-3.067l-.027-.566c-.02-.41-.07-.638-.135-.797a1.59 1.59 0 00-.86-.86c-.159-.065-.387-.115-.797-.135l-.566-.027c-.793-.036-1.065-.04-3.067-.04zm0 3.393a4.469 4.469 0 100 8.938 4.469 4.469 0 000-8.938zM12.315 9.08a3.07 3.07 0 110 6.139 3.07 3.07 0 010-6.139zm5.355-3.003a1.076 1.076 0 100 2.152 1.076 1.076 0 000-2.152z" clip-rule="evenodd" /></svg>
          </a>
        </div>
      </div>
    </div>

    <!-- Right Section: Login/Register Form -->
    <div class="lg:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-center dark:text-gray-200">
      <div class="mb-6 text-center">
        <h3 class="text-3xl lg:text-4xl font-bold mb-2 text-gray-900 dark:text-white">Welcome Back!</h3>
        <p class="text-gray-600 dark:text-gray-400">Log in or create an account to continue your journey.</p>
      </div>

      <div class="flex justify-center mb-6">
        <button class="px-6 py-3 rounded-full text-lg font-semibold border border-purple-500 bg-purple-500 text-white dark:bg-purple-700 dark:border-purple-700 hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-300 shadow-md mr-4 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          Login
        </button>
        <button class="px-6 py-3 rounded-full text-lg font-semibold border border-pink-500 text-pink-700 dark:text-pink-300 hover:bg-pink-50 dark:hover:bg-pink-900 transition-colors duration-300 shadow-md focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          Register
        </button>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
            class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-pink-500 focus:border-pink-500 sm:text-base bg-white dark:bg-gray-700 dark:text-white transition-colors duration-300">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
            class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-pink-500 focus:border-pink-500 sm:text-base bg-white dark:bg-gray-700 dark:text-white transition-colors duration-300">
        </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 dark:text-purple-400 border-gray-300 dark:border-gray-600 rounded focus:ring-purple-500 dark:focus:ring-purple-400">
            <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-pink-600 hover:text-pink-500 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-300">Forgot your password?</a>
          </div>
        </div>

        <div>
          <button type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:ring-offset-gray-900 transition-all duration-300 transform hover:scale-105">
            Sign In
          </button>
        </div>
      </form>

      <div class="mt-8 relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <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-1 gap-4">
        <button type="button"
          class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-semibold bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
          <svg class="h-6 w-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.001 2.002c-5.522 0-10 4.477-10 10 0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.886 8.438-9.879 0-5.522-4.477-10-10-10Z"/></svg>
          Sign in with Facebook
        </button>
        <button type="button"
          class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-semibold bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
          <svg class="h-6 w-6 mr-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M22.54 12.083c0-.7-.06-1.39-.18-2.07H12v3.69h6.1C17.78 17.65 15.06 20 12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8c2.34 0 4.42.96 5.96 2.4l2.79-2.79C18.66 2.92 15.52 1 12 1 5.92 1 1 5.92 1 12s4.92 11 11 11c6.08 0 11-4.92 11-11v-.917z"/></svg>
          Sign in with Google
        </button>
      </div>
    </div>
  </div>
</div>

Auth_Component_Dating_Neon_Artistic

Un componente di autenticazione semplice e artistico con una combinazione di colori neon/elettrico, progettato per piattaforme di appuntamenti/social, caratterizzato da un'estetica ad acquerello morbido e piena reattività con supporto per la modalità oscura.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center p-4 sm:p-6 bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-black dark:to-gray-950 font-sans">
  <div class="relative w-full max-w-md mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80 border border-purple-300 dark:border-purple-800">
    <!-- Artistic Background Elements (simulated with gradients/overlays) -->
    <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20">
      <div class="absolute top-0 left-0 w-32 h-32 rounded-full bg-gradient-to-br from-pink-400 to-purple-500 blur-xl opacity-70 animate-blob dark:from-pink-800 dark:to-purple-900"></div>
      <div class="absolute bottom-10 right-10 w-40 h-40 rounded-full bg-gradient-to-br from-blue-400 to-green-400 blur-xl opacity-70 animate-blob animation-delay-2000 dark:from-blue-800 dark:to-green-900"></div>
      <div class="absolute top-1/3 left-1/4 w-24 h-24 rounded-full bg-gradient-to-br from-yellow-300 to-red-400 blur-xl opacity-70 animate-blob animation-delay-4000 dark:from-yellow-700 dark:to-red-800"></div>
    </div>

    <div class="relative z-10 p-6 sm:p-8 md:p-10 text-center">
      <h2 class="text-4xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 dark:from-pink-400 dark:via-purple-400 dark:to-blue-400 mb-4 tracking-tight leading-tight" style="text-shadow: 0 0 10px rgba(255, 0, 150, 0.4), 0 0 20px rgba(150, 0, 255, 0.4);">Spark Your Connection</h2>
      <p class="text-lg text-gray-700 dark:text-gray-300 mb-8 max-w-sm mx-auto">Find your perfect match in a vibrant community.</p>

      <form class="space-y-6">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
            class="w-full px-5 py-3 rounded-full border-2 border-transparent bg-purple-50 dark:bg-purple-900 dark:bg-opacity-80 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
                   focus:ring-4 focus:ring-offset-2 focus:ring-pink-400 focus:border-pink-500 dark:focus:ring-pink-600 dark:focus:border-pink-500
                   transition duration-300 ease-in-out shadow-sm
                   bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70 dark:bg-opacity-70
                   outline-none"
            placeholder="Email address">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
            class="w-full px-5 py-3 rounded-full border-2 border-transparent bg-blue-50 dark:bg-blue-900 dark:bg-opacity-80 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
                   focus:ring-4 focus:ring-offset-2 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500
                   transition duration-300 ease-in-out shadow-sm
                   bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70 dark:bg-opacity-70
                   outline-none"
            placeholder="Password">
        </div>

        <button type="submit"
          class="w-full flex items-center justify-center px-6 py-3 border-2 border-transparent text-lg font-semibold rounded-full shadow-lg 
                 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 
                 text-white dark:from-pink-600 dark:to-purple-700 dark:hover:from-pink-700 dark:hover:to-purple-800 
                 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-pink-400
                 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105
                 relative overflow-hidden group">
          <span class="absolute inset-0 border-animation"></span>
          <span class="block">Login</span>
          <svg class="ml-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 transition duration-300 ease-in-out">Forgot your password?</a>
        </div>
      </form>

      <div class="relative flex justify-center text-sm uppercase mt-8">
        <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
      </div>

      <div class="mt-6 flex justify-center space-x-4">
        <button class="w-12 h-12 flex items-center justify-center rounded-full border-2 border-blue-400 dark:border-blue-600 text-blue-500 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 transition duration-300 ease-in-out shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24h11.493v-9.294H8.772V10.37h4.045V7.411c0-4.013 2.392-6.22 6.044-6.22 1.748 0 3.267.13 3.69-.067v3.573H18.77c-1.879 0-2.253.945-2.253 2.213v2.877h4.811l-.837 3.718h-3.974V24h6.126c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"></path></svg>
        </button>
        <button class="w-12 h-12 flex items-center justify-center rounded-full border-2 border-red-400 dark:border-red-600 text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900 transition duration-300 ease-in-out shadow-sm focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12.0003 4.2694C14.7302 4.2694 16.4883 5.4385 17.5029 6.3813L20.0094 3.8748C17.973 1.8385 15.2215 0 12.0003 0C7.27582 0 3.25056 2.6841 1.25078 6.5593L5.00088 9.0717C5.97544 6.7885 8.76678 4.2694 12.0003 4.2694ZM23.0005 10.5H12V14.5H19.0004C18.8996 15.1765 18.5721 15.8239 18.0694 16.3475L21.8219 18.859C20.618 20.1983 18.9912 21.3674 17.0004 22.0305V18.1772L15.0004 18.1772L15.0004 22.0305C13.8821 22.2599 12.7417 22.3789 11.5997 22.3789C7.27582 22.3789 3.25056 19.6948 1.25078 15.8196L5.00088 13.3073C5.97544 15.5905 8.76678 18.1096 12.0003 18.1096C13.8471 18.1096 15.5985 17.3822 16.7995 16.1812L19.5995 18.9818L21.0005 17.5818L23.0005 15.5818M12.0003 16.1096C11.3323 16.1096 10.6727 16.0592 10.0003 15.9329C9.32791 15.8066 8.66838 15.7061 8.00032 15.6305C7.33226 15.5549 6.67273 15.5045 6.00032 15.5045H12.0003C12.0003 15.5045 12.0003 15.5045 12.0003 15.5045V16.1096Z"></path></svg>
        </button>
      </div>

      <p class="mt-8 text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? <a href="#" class="font-medium text-green-600 dark:text-green-400 hover:text-green-500 dark:hover:text-green-300 transition duration-300 ease-in-out">Sign up now!</a>
      </p>
    </div>
  </div>
</div>

<style>
  /* Keyframes for the 'blob' animation */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, 0.01, 0.4, 1);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Custom border animation for the button */
  .border-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 9999px; /* Full rounded */
    border: 2px solid transparent;
    background: linear-gradient(45deg, #FF00FF, #00BFFF, #FF00FF) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: glow-border 2s infinite alternate;
  }

  .dark .border-animation {
    background: linear-gradient(45deg, #F06EB0, #40E0D0, #F06EB0) border-box;
  }

  @keyframes glow-border {
    0% {
      border-color: rgba(255, 0, 255, 0.5);
      transform: translate(0, 0);
    }
    50% {
      border-color: rgba(0, 191, 255, 0.8);
      transform: translate(1px, 1px);
    }
    100% {
      border-color: rgba(255, 0, 255, 0.5);
      transform: translate(0, 0);
    }
  }
</style>

Componente Componenti di autenticazione

Un componente di autenticazione complesso progettato per applicazioni industriali/manifatturiere, caratterizzato da un'estetica monospace/sviluppatore con tonalità di colore oceano/blu. Include moduli di accesso, registrazione e reimpostazione della password, completamente reattivo con supporto della modalità oscura.

Aperto Anteprima

                <div class="min-h-screen bg-gradient-to-br from-blue-950 via-blue-900 to-blue-800 flex items-center justify-center p-4 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 font-mono text-white text-sm">
  <div class="w-full max-w-4xl bg-blue-900/70 backdrop-blur-sm rounded-lg shadow-2xl overflow-hidden md:flex dark:bg-gray-900/70 p-6 md:p-8 border border-blue-700 dark:border-gray-700 animate-fade-in">
    
    <!-- Image Section (Left on Desktop, Top on Mobile) -->
    <div class="hidden md:flex md:w-1/2 bg-blue-950 border-r border-blue-700 dark:bg-gray-950 dark:border-gray-700 flex flex-col justify-between p-6 animate-slide-in-left">
      <div>
        <h2 class="text-3xl font-bold mb-4 text-blue-300 dark:text-gray-300">Industrial Command Center</h2>
        <p class="text-blue-200 dark:text-gray-400 leading-relaxed">
          Access your manufacturing control systems. Securely manage production lines, monitor sensor data, and optimize operational efficiency.
        </p>
        <ul class="mt-6 space-y-2 text-blue-200 dark:text-gray-400">
          <li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">&#9654;</span> Real-time Data Analytics</li>
          <li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">&#9654;</span> Secure Machine Interfacing</li>
          <li class="flex items-center"><span class="text-blue-400 dark:text-gray-500 mr-2">&#9654;</span> Global Supply Chain Management</li>
        </ul>
      </div>
      <div class="mt-8">
        <img src="https://picsum.photos/600/400?grayscale&random=1" alt="Industrial machinery" class="rounded-md shadow-lg border border-blue-700 dark:border-gray-700 opacity-80 hover:opacity-100 transition-opacity duration-300">
      </div>
    </div>

    <!-- Forms Section (Right on Desktop, Bottom on Mobile) -->
    <div class="w-full md:w-1/2 p-6 md:px-10 py-8 flex flex-col justify-center animate-slide-in-right">
      <div x-data="{ currentTab: 'login' }" class="w-full">
        <div class="flex mb-6 border-b border-blue-700 dark:border-gray-700">
          <button @click="currentTab = 'login'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'login', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'login'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
            Login
          </button>
          <button @click="currentTab = 'signup'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'signup', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'signup'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
            Sign Up
          </button>
          <button @click="currentTab = 'reset'" :class="{'border-b-2 border-blue-400 text-blue-300 dark:border-gray-400 dark:text-gray-300': currentTab === 'reset', 'text-blue-400/60 dark:text-gray-500 hover:text-blue-300 dark:hover:text-gray-300': currentTab !== 'reset'}" class="py-2 px-4 focus:outline-none transition-colors duration-200 text-lg">
            Reset
          </button>
        </div>

        <!-- Login Form -->
        <form x-show="currentTab === 'login'" x-transition.opacity.duration.300 class="space-y-6">
          <h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">System Access</h2>
          <div>
            <label for="login-username" class="block text-blue-200 dark:text-gray-400 mb-2">Username</label>
            <input type="text" id="login-username" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="login-password" class="block text-blue-200 dark:text-gray-400 mb-2">Password</label>
            <input type="password" id="login-password" placeholder="********" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="remember-me" type="checkbox" class="h-4 w-4 text-blue-500 bg-blue-800 border-blue-600 rounded focus:ring-blue-400 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
              <label for="remember-me" class="ml-2 block text-blue-200 dark:text-gray-400 cursor-pointer">Remember me</label>
            </div>
            <a href="#" @click.prevent="currentTab = 'reset'" class="text-blue-300 hover:text-blue-200 dark:text-gray-400 dark:hover:text-gray-300 transition-colors duration-200">Forgot password?</a>
          </div>
          <button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
            <span class="relative z-10">Login To Terminal &#x2192;</span>
            <span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </form>

        <!-- Sign Up Form -->
        <form x-show="currentTab === 'signup'" x-transition.opacity.duration.300 class="space-y-6">
          <h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">New User Registration</h2>
          <div>
            <label for="signup-email" class="block text-blue-200 dark:text-gray-400 mb-2">Email Address</label>
            <input type="email" id="signup-email" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="signup-username" class="block text-blue-200 dark:text-gray-400 mb-2">Desired Username</label>
            <input type="text" id="signup-username" placeholder="new.user" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="signup-password" class="block text-blue-200 dark:text-gray-400 mb-2">Create Password</label>
            <input type="password" id="signup-password" placeholder="Min 8 characters" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <div>
            <label for="signup-confirm-password" class="block text-blue-200 dark:text-gray-400 mb-2">Confirm Password</label>
            <input type="password" id="signup-confirm-password" placeholder="Repeat password" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
            <span class="relative z-10">Register Account &#x2192;</span>
            <span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </form>

        <!-- Password Reset Form -->
        <form x-show="currentTab === 'reset'" x-transition.opacity.duration.300 class="space-y-6">
          <h2 class="text-2xl font-bold text-blue-300 dark:text-gray-300 mb-4">Password Recovery</h2>
          <div>
            <label for="reset-email" class="block text-blue-200 dark:text-gray-400 mb-2">Email Address</label>
            <input type="email" id="reset-email" placeholder="[email protected]" class="w-full px-4 py-2 border border-blue-600 rounded-md bg-blue-800 text-blue-100 placeholder-blue-300/50 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-200">
          </div>
          <p class="text-blue-200 dark:text-gray-400 text-xs">Enter your registered email address and we'll send you instructions to reset your password. Check your spam folder.</p>
          <button type="submit" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 relative group overflow-hidden">
            <span class="relative z-10">Send Reset Link &#x2192;</span>
            <span class="absolute top-0 left-0 w-full h-full bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
          <button @click.prevent="currentTab = 'login'" class="w-full border border-blue-600 hover:border-blue-500 text-blue-300 hover:text-blue-200 py-2 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-600">
            &#x2190; Back to Login
          </button>
        </form>
      </div>
    </div>
  </div>

  <!-- Alpine JS for Tab Switching -->
  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.data('authTabs', () => ({
        currentTab: 'login',
      }));
    });
  </script>

  <!-- Tailwind Typography and Custom Animations (Optional, if not already in config) -->
  <style>
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slide-in-left {
      from { opacity: 0; transform: translateX(-50px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slide-in-right {
      from { opacity: 0; transform: translateX(50px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .animate-fade-in { animation: fade-in 0.8s ease-out forwards; }
    .animate-slide-in-left { animation: slide-in-left 0.8s ease-out forwards; }
    .animate-slide-in-right { animation: slide-in-right 0.8s ease-out forwards; }
  </style>
</div>

ArtDecoAuthComponent

Componente di autenticazione ispirato all'Art Déco per applicazioni mediche/sanitarie, con motivi geometrici, colori ad alto contrasto e piena reattività con supporto della modalità scura. Adatto per moduli di accesso o registrazione.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-2xl rounded-lg overflow-hidden border-t-8 border-b-8 border-teal-500 dark:border-teal-700 transform transition-all duration-300 scale-95 md:scale-100 ease-in-out hover:shadow-3xl hover:scale-100">
    <div class="p-8 pb-0 text-center">
      <svg class="mx-auto h-16 w-16 text-teal-600 dark:text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.92 12c0 3.072 1.354 5.961 3.75 8.016A12.001 12.001 0 0012 21c3.072 0 5.961-1.354 8.016-3.75A12.001 12.001 0 0021.08 12c0-3.072-1.354-5.961-3.75-8.016z" />
      </svg>
      <h2 class="mt-4 text-3xl font-extrabold text-gray-900 dark:text-white tracking-wider uppercase leading-tight font-serif">
        <span class="text-teal-600 dark:text-teal-500">Pharma</span>Login
      </h2>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        Your health, simplified.
      </p>
    </div>
    <div class="p-8 pt-6">
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
              </svg>
            </div>
            <input id="email" name="email" type="email" autocomplete="email" required class="block w-full py-3 pl-10 pr-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="[email protected]">
          </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 relative rounded-md shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-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 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
              </svg>
            </div>
            <input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full py-3 pl-10 pr-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="••••••••">
          </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-teal-600 dark:text-teal-500 focus:ring-teal-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-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-teal-600 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-400 hover:underline">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-bold text-white bg-teal-600 hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 uppercase tracking-widest transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
            Sign In
          </button>
        </div>
      </form>

      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Don't have an account?
          <a href="#" class="font-medium text-teal-600 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-400 hover:underline">
            Sign Up for free
          </a>
        </p>
      </div>
    </div>
    <div class="relative bg-gradient-to-r from-teal-500 to-teal-700 dark:from-teal-700 dark:to-teal-900 h-16 flex items-center justify-center">
      <div class="absolute w-full h-full opacity-10 dark:opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23000\' fill-opacity=\'0.05\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6zm30 30v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zm0 4v-4H4v4H0v2h4v4h2v-4h4v-2H6zM42 0h-2v4h-4v2h4v4h2V6h4V4h-4zM24 6v4h-4v-4h-4V0h4v4h4V0h4v4h4V0h-4v6h-4zm0-6V0h-2v4h-4v2h4v4h2V6h4V4h-4zM0 6h4V0h-4v6zM42 6h4V0h-4v6zM0 42h4V36H0v6zM42 42h4V36h-4v6zM24 42h4V36h-4v6zM6 42h4V36H6v6zM36 42h4V36h-4v6zM48 6h4V0h-4v6zM54 0h-2v4h-4v2h4v4h2V6h4V4h-4zM54 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM48 42h4V36h-4v6zM54 42h4V36h-4v6zM48 36h4v6h-4v-6zM36 0h4V6h-4V0zM60 0h-4v6h4V0zM60 36h-4v6h4V36zM36 36h4v6h-4v-6zM6 0h4V6H6V0zM6 36h4v6H6v-6zM24 0h4V6h-4V0zM24 36h4V42h-4V36zM30 6h4V0h-4v6zM30 36h4V42h-4V36zM18 0h4V6h-4V0zM18 36h4V42h-4V36zM12 0h4V6h-4V0zM12 36h4V42h-4V36z%27/%3E%3C/g%3E%3C/svg%3E'); display: block;"></div>
      <p class="relative z-10 text-xs text-white uppercase tracking-widest">
        Secure & Compliant Access
      </p>
    </div>
  </div>
</div>