jiefengzhimeng
<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex items-center justify-center"> <div id="login-modal" class="bg-white shadow-lg rounded-lg p-8 max-w-sm w-full relative"> <button id="close-button" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700"> <i class="iconoir-close text-2xl"></i> </button> <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-red-500 text-white p-2 rounded hover:bg-red-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">Sign up</a> </p> </div> <script> document.getElementById('close-button').addEventListener('click', function() { document.getElementById('login-modal').style.display = 'none'; }); </script> </body>