<main>
    <div class="content">
        <section class="container mx-auto max-w-lg bg-[url(/img/hps_logo.png)] rounded-2xl">
            <div class="flex flex-col w-full justify-center place-items-center border-[1px] border-[#0e0f0420] rounded-[20px] shadow-2xl py-10">
                <img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="">
                <form action="" class="p-6 space-y-4">
                    <input v-model="name" id="name" name="name" type="text" placeholder="Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
                    <input v-model="name" id="name" name="name" type="text" placeholder="Email ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
                    <input v-model="name" id="name" name="name" type="text" placeholder="Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
                    <input v-model="name" id="name" name="name" type="password" placeholder="New Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
                    <input v-model="name" id="name" name="name" type="password" placeholder="Confirm Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
                    <button class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Register</button>
                </form>
                <div class="flex flex-col place-content-between float-left">
                    <p class="">Back to <a href="/login" class="text-[#3084b5] font-bold">Login</a></p>
                    <p class="">Continue Without <a href="/" class="text-[#3084b5] font-bold">Login</a></p>
                </div>
            </div>
        </section>
    </div>
</main>
<style>
    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>