Auth_Component_Watercolor_Artistic

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