Search Components

Authentication Components

Components related to user authentication and security

3D_Auth_Agriculture_Simple

A simple, responsive authentication component with a 3D design aesthetic and high-contrast color scheme, suitable for agriculture/farming websites. Features dark mode support.

Open Preview

                <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

A simple, responsive authentication component designed with a soft, watercolor/artistic aesthetic. Features warm neutral colors and dark mode support, suitable for event or conference websites.

Open Preview

                <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

A complex, luxury/premium style authentication component for a dashboard, featuring a sweet color palette with bubblegum pink and mint green, and full responsiveness with dark mode support.

Open Preview

                <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

A responsive authentication component with a retro/vintage design, muted color scheme, tailored for healthcare/medical applications, including dark mode support.

Open Preview

                <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

A playful and cheerful authentication component designed for manufacturing/industrial applications, featuring rounded elements, an analogous color scheme, and full responsiveness with dark mode support.

Open Preview

                <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

A complex, responsive authentication component for CRM/Business Tools, featuring a skeuomorphic design style with cool neutral colors and dark mode support.

Open Preview

                <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

Luxury Authentication Component

An elegant and sophisticated authentication component designed for luxury fashion and beauty brands, featuring a rich interface, responsive layout, and dark mode support using an analogous color scheme.

Open Preview

                <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

A simple, artistic authentication component with a neon/electric color scheme, designed for dating/social platforms, featuring a soft watercolor aesthetic and full responsiveness with dark mode support.

Open Preview

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