If you want a creative log-in form with a gradient backdrop colour, you may use this example.
<body class="font-inter overflow-hidden"> <section class="flex justify-center relative"> <img src="https://pagedone.io/asset/uploads/1702362010.png" alt="gradient background image" class="w-full h-full object-cover fixed"> <div class="mx-auto max-w-lg px-6 lg:px-8 absolute py-20"> <img src="https://pagedone.io/asset/uploads/1702362108.png" alt="pagedone logo" class="mx-auto lg:mb-11 mb-8 object-cover"> <div class="rounded-2xl bg-white shadow-xl"> <form action="" class="lg:p-11 p-7 mx-auto"> <div class="mb-11"> <h1 class="text-gray-900 text-center font-manrope text-3xl font-bold leading-10 mb-2">Welcome Back</h1> <p class="text-gray-500 text-center text-base font-medium leading-6">Let’s get started with your 30 days free trail</p> </div> <input type="text" class="w-full h-12 text-gray-900 placeholder:text-gray-400 text-lg font-normal leading-7 rounded-full border-gray-300 border shadow-sm focus:outline-none px-4 mb-6" placeholder="Username"> <input type="text" class="w-full h-12 text-gray-900 placeholder:text-gray-400 text-lg font-normal leading-7 rounded-full border-gray-300 border shadow-sm focus:outline-none px-4 mb-1" placeholder="Password"> <a href="javascript:;" class="flex justify-end mb-6"> <span class="text-indigo-600 text-right text-base font-normal leading-6">Forgot Password?</span> </a> <button class="w-full h-12 text-white text-center text-base font-semibold leading-6 rounded-full hover:bg-indigo-800 transition-all duration-700 bg-indigo-600 shadow-sm mb-11">Login</button> <a href="javascript:;" class="flex justify-center text-gray-900 text-base font-medium leading-6"> Don’t have an account? <span class="text-indigo-600 font-semibold pl-3"> Sign Up</span> </a> </form> </div> </div> </section> </body>