Playful_Manufacturing_Authentication_Component

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