Sign in / Sign up UI Components – Flow Library

<section class="relative overflow-hidden">
        <div class="flex flex-wrap">
            <div class="w-full lg:w-1/2 xl:w-2/3 pt-12 px-5 xl:px-20 pb-24">
                <div class="flex mb-20 lg:mb-32 items-center justify-between">
                    <span>
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V36C40 38.2091 38.2091 40 36 40H4C1.79086 40 0 38.2091 0 36V4Z" fill="#BEF264"></path>
                            <rect x="19.1665" y="6.6665" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                            <rect x="19.1665" y="23.3335" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                            <rect x="28.8391" y="9.98291" width="1.66667" height="10" rx="0.833333" transform="rotate(45 28.8391 9.98291)" fill="#022C22"></rect>
                            <rect x="17.0537" y="21.7678" width="1.66667" height="10" rx="0.833333" transform="rotate(45 17.0537 21.7678)" fill="#022C22"></rect>
                            <rect x="23.3335" y="20.8333" width="1.66667" height="10" rx="0.833333" transform="rotate(-90 23.3335 20.8333)" fill="#022C22"></rect>
                            <rect x="6.6665" y="20.8333" width="1.66667" height="10" rx="0.833333" transform="rotate(-90 6.6665 20.8333)" fill="#022C22"></rect>
                            <rect x="21.7678" y="22.9463" width="1.66667" height="10" rx="0.833333" transform="rotate(-45 21.7678 22.9463)" fill="#022C22"></rect>
                            <rect x="9.98267" y="11.1611" width="1.66667" height="10" rx="0.833333" transform="rotate(-45 9.98267 11.1611)" fill="#022C22"></rect>
                        </svg>                    
                    </span>
                    <p>
                        <span>New to Flow?</span>
                        <a href="#" class="inline-block font-medium underline hover:text-lime-600">Create an account</a>
                    </p>
                </div>
                <div class="max-w-sm mx-auto">
                    <form action="">
                        <h3 class="text-4xl font-medium mb-10">Login</h3>
                        <label for="" class="block pl-4 mb-1 text-sm font-medium">Email</label>
                        <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                        <label for="" class="block pl-4 mb-1 text-sm font-medium">Password</label>
                        <div class="relative mb-6" x-data="{ visible: false }">
                            <input type="password" :type="visible ? 'text': 'password'" class="relative w-full px-4 py-3 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                            <a href="#" x-on:click.prevent="visible = !visible" class="absolute top-1/2 right-0 transform -translate-y-1/2 mr-4">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1.75 10C1.75 10 4.75 4 10 4C15.25 4 18.25 10 18.25 10C18.25 10 15.25 16 10 16C4.75 16 1.75 10 1.75 10Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 12.25C11.2426 12.25 12.25 11.2426 12.25 10C12.25 8.75736 11.2426 7.75 10 7.75C8.75736 7.75 7.75 8.75736 7.75 10C7.75 11.2426 8.75736 12.25 10 12.25Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </a>
                        </div>
                        <div class="text-right mb-10">
                            <a href="#" class="inline-block text-sm underline font-medium">Forgot password?</a>
                        </div>
                        <a href="#" class="inline-flex w-full py-3 px-6 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Login</a>
                        <span class="block text-center py-4 mx-auto text-gray-700">or</span>
                        <a href="#" class="inline-flex w-full py-3 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-black rounded-full transition duration-200">
                            <img class="h-4" src="flow-assets/sign-in/google-icon.svg" alt="">
                            <span class="ml-4">Sign in with Google</span>
                        </a>
                    </form>
                </div>
            </div>
            <div class="w-full lg:w-1/2 xl:w-1/3">
                <img class="block w-full max-w-lg xl:max-w-2xl ml-auto h-full" src="flow-assets/sign-in/image-circle-photos.png" alt="">
            </div>
        </div>
    </section>