ログイン/サインアップコンポーネント

<div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md border border-gray-200 dark:border-gray-700 transition-colors duration-300 overflow-hidden relative">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-300 via-purple-300 to-pink-300 opacity-20 dark:from-indigo-600 dark:via-purple-600 dark:to-pink-600 dark:opacity-10 pointer-events-none transition-all duration-500 blur-sm"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6 text-center transition-colors duration-300">
        Welcome Back
      </h2>
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-300">
            Email Address
          </label>
          <input type="email" id="email" name="email" autocomplete="email" required class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 transition-colors duration-300">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-300">
            Password
          </label>
          <input type="password" id="password" name="password" autocomplete="current-password" required class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 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 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-300">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-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-md shadow-sm text-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-600 transition-all duration-300 transform hover:scale-105 active:scale-95
          relative overflow-hidden group">
            <span class="relative z-10">Sign In</span>
            <span class="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 mix-blend-screen"></span>
          </button>
        </div>
      </form>

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