Authentication.

4 Blocks

Web Authentication is an is a fairly recent W3C standard backed by major players like Google, Paypal, Mozilla, Microsoft, and Qualcomm. It aims at defining a web-browser API for the creation and use of strong authentication credentials based on public key cryptography.

1

        <section class="flex flex-col items-center h-screen md:flex-row ">
            <div class="hidden w-full h-screen bg-gray-400 lg:block md:w-1/3 xl:w-2/3">
                <!---- The image will cover the whole right side from bottom to top and side to side-->
                 <img src="https://dummyimage.com/1000x800/F3F4F7/64748b"
                    alt="" class="object-cover w-full h-full">
            </div>
            <div class="flex items-center justify-center w-full h-screen px-6 bg-blue-1300 md:max-w-md lg:max-w-full md:mx-auto md:w-1/2 xl:w-1/3 lg:px-16 xl:px-12">
                <div class="w-full h-100">
                    <a class="flex items-center w-32 mb-4 font-medium text-gray-900 title-font md:mb-0">
                        <img src="../badges/WhitePink.svg" alt="">
                    </a>
                    <h1 class="mt-12 text-2xl font-semibold tracking-tighter text-blue-700 sm:text-3xl title-font">Log in to your
                        account</h1>
                    <form class="mt-6" action="#" method="POST">
                        <div>
                            <label class="block text-sm font-medium leading-relaxed tracking-tighter text-gray-700">Email
                                Address</label>
                            <input type="email" name="" id="" placeholder="Your Email "
                                class="w-full px-4 py-2 mt-2 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0 "
                                autofocus autocomplete required>
                        </div>
                        <div class="mt-4">
                            <label class="block text-sm font-medium leading-relaxed tracking-tighter text-gray-700">Password</label>
                            <input type="password" name="" id="" placeholder="Your Password" minlength="6"
                                class="w-full px-4 py-2 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0"
                                required>
                        </div>
                        <div class="mt-2 text-right">
                            <a href="#"
                                class="text-sm font-semibold leading-relaxed text-gray-700 hover:text-blue-700 focus:text-blue-700">Forgot
                                Password?</a>
                        </div>
                        <button type="submit" class="block w-full px-4 py-3 mt-6 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">Log In</button>
                    </form>
                    <hr class="w-full my-6 border-gray-300">
                    <div class="flex justify-enter">
                        <button type="button"
                            class="inline-flex w-full px-4 py-3 font-semibold text-blue-700 border border-gray-300 rounded-lg bg-blue-1300 hover:bg-blue-700 hover:text-white focus:bg-gray-100">
                            <div class="flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    class="w-6 h-6" viewBox="0 0 48 48">
                                    <defs>
                                        <path id="a"
                                            d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z" />
                                    </defs>
                                    <clipPath id="b">
                                        <use xlink:href="#a" overflow="visible" />
                                    </clipPath>
                                    <path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z" />
                                    <path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z" />
                                    <path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z" />
                                    <path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z" />
                                </svg>
                                <span class="ml-4">
                                    Log in with
                                    Google
                                </span>
                            </div>
                        </button>
                        <button type="button"
                            class="inline-flex px-4 py-3 ml-8 font-semibold text-blue-700 border border-gray-300 rounded-lg bg-blue-1300 hover:bg-blue-700 focus:bg-gray-100 hover:text-blue-500">
                            <div class="flex items-center justify-center">
                                <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    class="w-5 h-5" viewBox="0 0 24 24">
                                    <path
                                        d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                    </path>
                                </svg>
                            </div>
                        </button>
                    </div>
                    <p class="mt-8 text-center">Need an account? <a href="#"
                            class="font-semibold text-blue-500 hover:text-blue-700">Sign Up</a></p>
                </div>
            </div>
        </section>
                                

WICKEDTEMPLATES
"Free & premium Well designed landing pages to integrate with your next project."

Have a look to Wicked Templates.
2

        <section class="flex flex-col items-center h-screen md:flex-row ">
            <div class="relative hidden w-full h-screen bg-gray-400 lg:block md:w-1/3 xl:w-1/3">
                <!---- The image will cover the whole right side from bottom to top and side to side-->
                 <img src="https://dummyimage.com/600x500/F3F4F7/64748b"
                    alt="" class="absolute object-cover w-full h-full">
                <div class="relative z-10 m-12 text-left">
                    <a class="flex items-center w-32 mb-4 font-medium text-gray-900 title-font md:mb-6">
                        <img src="./dist/badges/WhitePink.svg" alt="">
                    </a>
                    <h1 class="mb-2 text-2xl font-semibold tracking-tighter text-blue-700 tsm:text-5xl title-font">Discover 100+
                        <br>
                        screens ready to use.
                    </h1>
                </div>
            </div>
            <div class="flex w-full h-screen px-6 bg-blue-1300 md:max-w-md lg:max-w-full md:mx-auto md:w-1/2 xl:w-1/3 lg:px-16 xl:px-12 items-left justify-left">
                <div class="w-full py-32 lg:py-6 lg:h-100">
                    <h1 class="my-12 text-2xl font-semibold tracking-tighter text-blue-700 sm:text-3xl title-font">Sign Up to a new
                        world.</h1>
                    <div class="flex justify-enter">
                        <button type="button"
                            class="inline-flex w-full px-4 py-3 font-semibold text-blue-800 border border-gray-300 rounded-lg bg-blue-1300 hover:bg-blue-800 hover:text-white focus:bg-gray-100">
                            <div class="flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    class="w-6 h-6" viewBox="0 0 48 48">
                                    <defs>
                                        <path id="a"
                                            d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z" />
                                    </defs>
                                    <clipPath id="b">
                                        <use xlink:href="#a" overflow="visible" />
                                    </clipPath>
                                    <path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z" />
                                    <path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z" />
                                    <path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z" />
                                    <path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z" />
                                </svg>
                                <span class="ml-4">
                                    Log in with
                                    Google
                                </span>
                            </div>
                        </button>
                        <button type="button"
                            class="inline-flex px-4 py-3 ml-8 font-semibold text-blue-800 border border-gray-300 rounded-lg bg-blue-1300 hover:bg-blue-800 focus:bg-gray-100 hover:text-blue-500">
                            <div class="flex items-center justify-center">
                                <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    class="w-5 h-5" viewBox="0 0 24 24">
                                    <path
                                        d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                    </path>
                                </svg>
                            </div>
                        </button>
                    </div>
                    <form class="mt-6" action="#" method="POST">
                        <div>
                            <label class="block text-xs font-medium leading-relaxed tracking-tighter text-gray-700">Email
                                Address</label>
                            <input type="email" name="" id="" placeholder="Your Email "
                                class="w-full px-4 py-2 mt-2 text-base bg-gray-100 border-transparent rounded-lg ext-blue-700 focus:border-gray-500"
                                autofocus autocomplete required>
                        </div>
                        <div class="mt-4">
                            <label class="block text-xs font-medium leading-relaxed tracking-tighter text-gray-700">Password</label>
                            <input type="password" name="" id="" placeholder="Your Password" minlength="6"
                                class="w-full px-4 py-2 text-base bg-gray-100 border-transparent rounded-lg ext-blue-700 focus:border-gray-500"
                                required>
                        </div>
                        <div class="mt-2 text-right">
                            <a href="#"
                                class="text-sm font-semibold leading-relaxed text-gray-700 hover:text-blue-700 focus:text-blue-700">Forgot
                                Password?</a>
                        </div>
                        <button type="submit" class="block w-full px-4 py-3 mt-6 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">Log In</button>
                    </form>
                    <p class="mt-8 text-center">Need an account? <a href="#"
                            class="font-semibold text-blue-500 hover:text-blue-400">Sign
                            Up</a></p>
                </div>
            </div>
        </section>
                                    
3

        <section class="flex flex-col items-center h-screen md:flex-row">
            <div class="container mx-auto">
                <div class="flex justify-center px-2 py-6 ">
                    <div class="flex w-full rounded-lg xl:w-3/4 lg:w-11/12 lg:shadow-xl ">
                        <div class="relative hidden w-full h-auto bg-cover border-r rounded-l-lg bg-blue-1300 lg:block lg:w-6/12">
                            <div class="relative z-10 m-12 text-left ">
                                <a class="flex items-center w-32 font-medium text-gray-900 title-font md:mb-6">
                                    <img src="../badges/WhitePink.svg" alt="">
                                </a>
                                <h2 class="mt-12 mb-2 text-2xl font-semibold tracking-tighter text-blue-700 sm:text-3xl title-font">
                                    Create an account.
                                </h2>
                                <div
                                    class="w-full mt-16 mb-8 text-base leading-relaxed text-gray-900 sm:md:w-3/3 lg:text-1xl ">
                                    All you have to do is choose the section you need, remove the one that you do not
                                    need for that project and paste
                                    the one you need in that moment. All the section have been given the same left/right
                                    padding. Because consistence is
                                    king.
                                </div>
                            </div>
                        </div>
                        <div
                            class="w-full px-8 py-24 border-gray-100 rounded-lg bg-blue-1300 lg:w-8/12 lg:px-24 lg:py-4 lg:rounded-l-none s">
                            <div class="relative z-10 text-left ">
                                <div class="flex justify-enter lg:py-6">
                                    <button type="button"
                                        class="inline-flex w-full px-4 py-3 font-semibold text-blue-700 border border-gray-300 rounded-lg bg-blue-1300 hover:bg-blue-700 hover:text-white focus:bg-gray-100">
                                        <div class="flex items-center justify-center">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink" class="w-6 h-6"
                                                viewBox="0 0 48 48">
                                                <defs>
                                                    <path id="a"
                                                        d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z" />
                                                </defs>
                                                <clipPath id="b">
                                                    <use xlink:href="#a" overflow="visible" />
                                                </clipPath>
                                                <path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z" />
                                                <path clip-path="url(#b)" fill="#EA4335"
                                                    d="M0 11l17 13 7-6.1L48 14V0H0z" />
                                                <path clip-path="url(#b)" fill="#34A853"
                                                    d="M0 37l30-23 7.9 1L48 0v48H0z" />
                                                <path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z" />
                                            </svg>
                                            <span class="ml-4">
                                                Log in with
                                                Google
                                            </span>
                                        </div>
                                    </button>
                                    <button type="button"
                                        class="inline-flex px-4 py-3 ml-8 font-semibold text-blue-700 border border-gray-300 rounded-lg bg-blue-1300 hover:bg-blue-870 focus:bg-gray-100 hover:text-blue-500">
                                        <div class="flex items-center justify-center">
                                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                                                <path
                                                    d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                                </path>
                                            </svg>
                                        </div>
                                    </button>
                                </div>
                                <form class="mt-6" action="#" method="POST">
                                    <div>
                                        <label class="block text-base font-medium leading-relaxed text-gray-700">User
                                            Name</label>
                                        <input type="text" name="" id="" placeholder="Your User Name "
                                            class="w-full px-4 py-2 mt-2 text-base bg-gray-100 border-transparent rounded-lg ext-blue-700 focus:border-gray-500"
                                            autofocus autocomplete required>
                                    </div>
                                    <div class="mt-4">
                                        <label class="block text-base font-medium leading-relaxed text-gray-700">Email
                                            Address</label>
                                        <input type="email" name="" id="" placeholder="Your Email "
                                            class="w-full px-4 py-2 mt-2 text-base bg-gray-100 border-transparent rounded-lg ext-blue-700 focus:border-gray-500"
                                            autofocus autocomplete required>
                                    </div>
                                    <div class="flex flex-wrap mt-4 mb-6 -mx-3">
                                        <div class="w-full px-3 mb-6 md:w-1/2 md:mb-0">
                                            <label class="text-base font-medium leading-relaxed text-gray-700"
                                                for="password" minlength="6">
                                                Password
                                            </label>
                                            <input
                                                class="block w-full px-4 py-2 mt-2 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg ext-blue-700 focus:border-gray-500"
                                                id="password" type="text" placeholder="Your Password">
                                            <p class="mt-1 text-xs italic text-blue-500">Please fill out this field.</p>
                                        </div>
                                        <div class="w-full px-3 md:w-1/2">
                                            <label class="text-base font-medium leading-relaxed text-gray-700"
                                                for="confirm">
                                                Confirm
                                            </label>
                                            <input
                                                class="block w-full px-4 py-2 mt-2 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg ext-blue-700 focus:border-gray-500 "
                                                id="confirm" type="text" placeholder="Confirm">
                                        </div>
                                    </div>
                                    <button type="submit" class="block w-full px-4 py-3 mt-6 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg bg-gradient-to-r from-blue-700 hover:from-blue-500 to-blue-500 hover:to-blue-700 focus:shadow-outline focus:outline-none">Log In</button>
                                </form>
                                <p class="mt-8 text-center">Already have an account? <a href="#"
                                        class="font-semibold text-blue-500 hover:text-blue-700">Sign
                                        In</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
                                    
4

          <section class="text-gray-700 body-font">
            <div class="container px-8 pt-32 mx-auto lg:px-4">
            <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                <h2 class="mb-4 text-xs font-semibold tracking-widest text-blue-600 uppercase title-font">a great
                    header right here</h2>
                <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-5xl title-font">
                    A centered
                    <br class="md:hidden">
                    medium lenght display headline.
                </h1>
                <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-2/3">Whatever cardigan
                    tote bag tumblr hexagon brooklyn
                    asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                    them man
                    bun deep.</p>
            </div>
                <form class="flex flex-col w-full pt-6 pb-8 mb-4 bg-white lg:px-32 " name="" method="POST">
                    <input type="hidden" name="" value="sponsors">
                    <div class="flex flex-wrap mb-6 -mx-3">
                        <div class="w-full px-3 mb-6 md:w-1/2 md:mb-0">
                            <input
                                class="w-full px-4 py-2 mt-2 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg ext-blue-700 focus:border-gray-500"
                                id="grid-title" type="text" name="title" placeholder="From..." required="">
                        </div>
                        <div class="w-full px-3 md:w-1/2">
                            <input
                                class="w-full px-4 py-2 mt-2 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg ext-blue-700 focus:border-gray-500"
                                id="grid-url" type="text" name="url" placeholder="To..." required="">
                        </div>
                    </div>
                    <div class="flex flex-wrap mb-2 -mx-3">
                        <div class="w-full px-3 mb-6 md:w-1/4 md:mb-0">
                            <div class="relative ">
                                <select name="date[]"
                                    class="block w-full px-4 py-2 mt-2 text-base text-gray-500 bg-gray-100 border-transparent rounded-lg appearance-none ext-blue-700 focus:border-gray-500">
                                    <option>Check In</option>
                                    <option value="Date 1">Date 1</option>
                                    <option value="Date 2">Date2 </option>
                                </select>
                                <!---pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700-->
                            </div>
                        </div>
                        <div class="w-full px-3 mb-6 md:w-1/4 md:mb-0">
                            <div class="relative ">
                                <select name="date[]"
                                    class="block w-full px-4 py-2 mt-2 text-base text-gray-500 bg-gray-100 border-transparent rounded-lg appearance-none ext-blue-700 focus:border-gray-500">
                                    <option>Check Out</option>
                                    <option value="Date 1">Date 1</option>
                                    <option value="Date 2">Date2 </option>
                                </select>
                                <!---pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700-->
                            </div>
                        </div>
                        <div class="w-full px-3 mb-6 md:w-1/4 md:mb-0">
                            <div class="relative ">
                                <select name="date[]"
                                    class="block w-full px-4 py-2 mt-2 text-base text-gray-500 bg-gray-100 border-transparent rounded-lg appearance-none ext-blue-700 focus:border-gray-500">
                                    <option>Adults</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                </select>
                                <!---pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700-->
                            </div>
                        </div>
                        <div class="w-full px-3 mb-6 md:w-1/4 md:mb-0">
                            <div class="relative ">
                                <select name="date[]"
                                    class="block w-full px-4 py-2 mt-2 text-base text-gray-500 bg-gray-100 border-transparent rounded-lg appearance-none ext-blue-700 focus:border-gray-500">
                                    <option>Kids</option>
                                    <option value="tuesday">1</option>
                                    <option value="thursday">2</option>
                                </select>
                                <!---pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700-->
                            </div>
                        </div>
                    </div>
                </form>
                <div class="flex lg:justify-center">
                    <button
                        class="inline-flex px-4 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">Button</button>
                </div>
            </div>
        </section>