Genrate a login... - Tailwind AI

<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex items-center justify-center">
  <div class="bg-white shadow-lg rounded-lg p-8 max-w-sm w-full">
    <h1 class="text-2xl font-bold mb-6 text-center">Login</h1>
    <form>
        <div class="mb-4">
            <label for="email" class="block text-gray-700 mb-2">Email</label>
            <input type="email" id="email" class="w-full p-2 border rounded" placeholder="Enter your email">
        </div>
        <div class="mb-6">
            <label for="password" class="block text-gray-700 mb-2">Password</label>
            <input type="password" id="password" class="w-full p-2 border rounded" placeholder="Enter your password">
        </div>
        <div class="flex items-center justify-between mb-4">
            <label class="flex items-center">
                <input type="checkbox" class="form-checkbox">
                <span class="ml-2 text-gray-700">Remember me</span>
            </label>
            <a href="#" class="text-blue-500 hover:underline">Forgot password?</a>
        </div>
        <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-400">Login</button>
    </form>
    <p class="mt-6 text-center text-gray-700">Don't have an account? <a href="#" class="text-blue-500 hover:underline" onclick="document.getElementById('signup').classList.remove('hidden'); document.getElementById('login').classList.add('hidden');">Sign up</a>
    </p>
  </div>

  <div id="signup" class="bg-white shadow-lg rounded-lg p-8 max-w-sm w-full hidden">
    <h1 class="text-2xl font-bold mb-6 text-center">Sign Up</h1>
    <form>
        <div class="mb-4">
            <label for="signup-email" class="block text-gray-700 mb-2">Email</label>
            <input type="email" id="signup-email" class="w-full p-2 border rounded" placeholder="Enter your email">
        </div>
        <div class="mb-4">
            <label for="signup-password" class="block text-gray-700 mb-2">Password</label>
            <input type="password" id="signup-password" class="w-full p-2 border rounded" placeholder="Enter your password">
        </div>
        <div class="mb-6">
            <label for="signup-confirm-password" class="block text-gray-700 mb-2">Confirm Password</label>
            <input type="password" id="signup-confirm-password" class="w-full p-2 border rounded" placeholder="Confirm your password">
        </div>
        <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-400">Sign Up</button>
    </form>
    <p class="mt-6 text-center text-gray-700">Already have an account? <a href="#" class="text-blue-500 hover:underline" onclick="document.getElementById('signup').classList.add('hidden'); document.getElementById('login').classList.remove('hidden');">Login</a>
    </p>
  </div>
</body>
Genrate a login and signup page in tailwind css
