| ```html |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Login - CureLens AI</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| </head> |
| <body class="bg-gray-50 min-h-screen flex flex-col"> |
| <custom-navbar></custom-navbar> |
| |
| <main class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="max-w-md w-full space-y-8 bg-white p-8 rounded-xl shadow-md"> |
| <div class="text-center"> |
| <h2 class="mt-6 text-3xl font-extrabold text-gray-900"> |
| Sign in to your account |
| </h2> |
| </div> |
| <form class="mt-8 space-y-6"> |
| <div class="rounded-md shadow-sm space-y-4"> |
| <div> |
| <label for="email" class="sr-only">Email address</label> |
| <input |
| id="email" |
| name="email" |
| type="email" |
| required |
| class="appearance-none rounded-lg relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" |
| placeholder="Email address" |
| /> |
| </div> |
| <div> |
| <label for="password" class="sr-only">Password</label> |
| <input |
| id="password" |
| name="password" |
| type="password" |
| required |
| class="appearance-none rounded-lg relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" |
| placeholder="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-blue-600 focus:ring-blue-500 border-gray-300 rounded" |
| /> |
| <label for="remember-me" class="ml-2 block text-sm text-gray-900"> |
| Remember me |
| </label> |
| </div> |
|
|
| <div class="text-sm"> |
| <a href="forgot-password.html" class="font-medium text-blue-600 hover:text-blue-500"> |
| Forgot your password? |
| </a> |
| </div> |
| </div> |
|
|
| <div> |
| <button |
| type="submit" |
| class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" |
| > |
| Sign in |
| </button> |
| </div> |
| </form> |
| <div class="text-center text-sm"> |
| <span class="text-gray-600">Don't have an account |
