<body class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 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 text-purple-700">Facebook Login</h1> <form> <div class="mb-4"> <label for="email" class="block text-purple-700 mb-2">Email</label> <input type="email" id="email" class="w-full p-2 border border-purple-300 rounded" placeholder="Enter your email"> </div> <div class="mb-6"> <label for="password" class="block text-purple-700 mb-2">Password</label> <input type="password" id="password" class="w-full p-2 border border-purple-300 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 text-purple-500"> <span class="ml-2 text-purple-700">Remember me</span> </label> <a href="#" class="text-purple-500 hover:underline">Forgot password?</a> </div> <button type="submit" class="w-full bg-purple-500 text-white p-2 rounded hover:bg-purple-400">Login</button> </form> <p class="mt-6 text-center text-purple-700">Don't have an account? <a href="#" class="text-purple-500 hover:underline">Sign up</a> </p> </div> </body>