유기적 로그인 양식 구성 요소

<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-lime-100 via-green-50 to-blue-50 dark:from-slate-800 dark:via-gray-900 dark:to-stone-950">
  <div class="max-w-md w-full p-8 space-y-8 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm rounded-3xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden relative group">
    <!-- Organic Shape Background -->
    <div class="absolute top-0 left-0 w-full h-full transform -translate-x-1/2 -translate-y-1/2 -rotate-45 bg-gradient-to-br from-green-200/50 to-blue-200/50 dark:from-emerald-900/50 dark:to-cyan-900/50 rounded-full opacity-60 group-hover:scale-110 transition-transform duration-500 ease-in-out" style="width: 200%; height: 200%; border-radius: 60% 40% 70% 30% / 30% 60% 40% 70%;"></div>
    <div class="absolute bottom-0 right-0 w-full h-full transform translate-x-1/2 translate-y-1/2 rotate-45 bg-gradient-to-tl from-yellow-100/50 to-lime-100/50 dark:from-orange-900/50 dark:to-lime-900/50 rounded-full opacity-60 group-hover:scale-110 transition-transform duration-500 ease-in-out" style="width: 150%; height: 150%; border-radius: 40% 60% 30% 70% / 70% 30% 60% 40%;"></div>

    <div class="relative z-10">
      <div class="text-center">
        <img class="mx-auto h-16 w-auto mb-4 rounded-full shadow-lg border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/lego/6.jpg" alt="Music Wave Logo">
        <h2 class="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white leading-tight tracking-wider">
          Harmony Connect
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
          Sign in to your musical journey
        </p>
      </div>

      <form class="mt-8 space-y-6" action="#" method="POST">
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required
                   class="appearance-none rounded-t-lg relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:focus:ring-emerald-600 dark:focus:border-emerald-600 sm:text-base bg-white/80 dark:bg-gray-700/80 transition-colors duration-200"
                   placeholder="Email address">
          </div>
          <div>
            <label for="password" class="sr-only">Password</label>
            <input id="password" name="password" type="password" autocomplete="current-password" required
                   class="appearance-none rounded-b-lg relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:focus:ring-emerald-600 dark:focus:border-emerald-600 sm:text-base bg-white/80 dark:bg-gray-700/80 transition-colors duration-200"
                   placeholder="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-green-600 dark:text-emerald-500 focus:ring-green-500 dark:focus:ring-emerald-600 border-gray-300 dark:border-gray-600 rounded cursor-pointer">
            <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-green-600 hover:text-green-500 dark:text-emerald-500 dark:hover:text-emerald-400 transtion-colors duration-200">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit"
                  class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-br from-green-600 to-lime-600 hover:from-green-700 hover:to-lime-700 dark:from-emerald-600 dark:to-cyan-600 dark:hover:from-emerald-700 dark:hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-emerald-600 transition-all transform hover:-translate-y-0.5 shadow-md hover:shadow-lg focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-5 w-5 text-green-200 group-hover:text-green-100 dark:text-emerald-200 dark:group-hover:text-emerald-100 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
              </svg>
            </span>
            Sign in
          </button>
        </div>

        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <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/70 dark:bg-gray-800/70 text-gray-500 dark:text-gray-400 rounded-full shadow-sm">
              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 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm text-sm font-medium text-gray-700 dark:text-gray-100 bg-white/80 dark:bg-gray-700/80 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:-translate-y-0.5">
              <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 1792 1792">
                <path d="M1344 640q-.25 43.75-29.75 87.75t-68 81.75q-38 37-97.5 76t-129.5 73q-69 34-118 34-93 0-141-55.5t-48-142.5v-288q0-74 48-142.5t141-55.5q49 0 118 34 60 29 129.5 73t97.5 76q38.25 37.75 68 81.75t29.75 87.75zM1792 896q0 307-178.5 547.5T1143 1792V1088h-308V896h308V672q0-109 45-168t141-59q75 0 114 4t67 2zm-1792 0q0-307 178.5-547.5T649 0l-7 1h308v192H0v608z"/>
              </svg>
              Google
            </button>
          </div>

          <div>
            <button class="w-full flex items-center justify-center px-4 py-2 border border-blue-400 dark:border-[#4267B2] rounded-xl shadow-sm text-sm font-medium text-[#4267B2] dark:text-[#E0E0E0] bg-blue-50/80 dark:bg-[#4267B2]/80 hover:bg-blue-100 dark:hover:bg-[#3D5A9C] transition-colors duration-200 transform hover:-translate-y-0.5">
              <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
                <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.99 3.65 9.12 8.43 9.87v-7.74H7.63V12h2.8V9.39c0-2.78 1.6-4.32 4.19-4.32 1.25 0 2.37.09 2.68.13v2.96h-1.76c-1.38 0-1.65.65-1.65 1.62V12h3.29l-.53 3.25h-2.76V22C18.35 21.12 22 16.99 22 12z"/>
              </svg>
              Facebook
            </button>
          </div>
        </div>

        <div class="text-center text-sm mt-6 text-gray-600 dark:text-gray-400">
          Don't have an account? 
          <a href="#" class="font-medium text-green-600 hover:text-green-500 dark:text-emerald-500 dark:hover:text-emerald-400 transtion-colors duration-200">
            Sign up
          </a>
        </div>

      </form>
    </div>
  </div>
</div>