<div class="w-full">
    <nav class="absolute w-full z-50 flex flex-wrap items-center justify-between px-2 py-3 mb-3 lg:bg-transparent bg-white">
       <div class="flex container mx-auto flex flex-wrap items-center justify-between px-0 lg:px-4">
          <a class="text-sm font-bold leading-relaxed inline-flex items-center mr-4 py-2 whitespace-nowrap uppercase lg:text-white text-blueGray-500" href="#/"><img class="rounded-full mr-2" style="width: 30px;"><span>Notus Design System PRO</span></a><button class="ml-auto cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-blueGray-400 rounded bg-transparent block outline-none focus:outline-none text-blueGray-300 lg:hidden" type="button"><i class="fas fa-bars"></i></button>
          <div class="items-center w-full lg:flex lg:w-auto flex-grow duration-300 transition-all ease-in-out hidden">
             <ul class="lg:items-center flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
                <li><a href="javascript:;" class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out lg:text-white text-blueGray-500"><i class="lg:text-blueGray-300 text-blueGray-500 far fa-file-alt text-lg leading-lg mr-2"></i> Docs</a></li>
             </ul>
             <ul class="lg:items-center lg:ml-auto flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
                <li class="relative">
                   <a class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out lg:text-white text-blueGray-800" href="javascript:;">Demo Pages <i class="ml-1 fas fa-caret-down transition-all duration-200 ease-in-out transform "></i></a>
                   <div class="hidden  z-50">
                      <div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in-out transform scale-95 opacity-0 absolute "><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 1</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 1</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 2</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 2</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 3</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 4</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 3</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 5</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 6</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 4</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 7</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 8</a></div>
                   </div>
                </li>
                <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out lg:text-white text-blueGray-500" href="https://www.facebook.com/CreativeTim" target="_blank"><i class="fab fa-facebook text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Share on Facebook</span></a></li>
                <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out lg:text-white text-blueGray-500" href="https://twitter.com/CreativeTim" target="_blank"><i class="fab fa-twitter text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Tweet on Twitter</span></a></li>
                <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out lg:text-white text-blueGray-500" href="https://github.com/creativetimofficial" target="_blank"><i class="fab fa-github text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Star on Github</span></a></li>
             </ul>
          </div>
       </div>
    </nav>
    <main>
       <section class="relative w-full h-full py-40 min-h-screen">
          <div class="absolute top-0 w-full h-full bg-blueGray-900 bg-no-repeat bg-full" style="background-image: url('../../assets/img/login-bg.png');"></div>
          <div class="container mx-auto px-4 h-full">
             <div class="flex content-center items-center justify-center h-full">
                <div class="w-full lg:w-4/12 px-4">
                   <div class="relative flex flex-col w-full mb-6 shadow-lg rounded-lg bg-white">
                      <div class="mb-0 px-6 py-6">
                         <div class="text-center mb-3">
                            <h6 class="text-blueGray-500 text-sm font-bold">Sign in with</h6>
                         </div>
                         <div class="text-center"><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-github-regular border-github-regular active:bg-github-active active:border-github-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="mr-1 fab fa-github"></i> github</a><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-facebook-regular border-facebook-regular active:bg-facebook-active active:border-facebook-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="mr-1 fab fa-facebook"></i> facebook</a><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-twitter-regular border-twitter-regular active:bg-twitter-active active:border-twitter-active text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="mr-1 fab fa-twitter"></i> twitter</a></div>
                         <hr class="mt-6 border-b-1 border-blueGray-200">
                      </div>
                      <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
                         <div class="text-blueGray-500 text-center mb-3 font-bold"><small>Or sign in with credentials</small></div>
                         <form>
                            <div class="relative w-full">
                               <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Email</label>
                               <div class="mb-3 pt-0"><input placeholder="Email" type="email" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
                            </div>
                            <div class="relative w-full">
                               <label class="block uppercase text-blueGray-500 text-xs font-bold mb-2 ml-1">Password</label>
                               <div class="mb-3 pt-0"><input placeholder="Password" type="password" class="border-blueGray-300 px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
                            </div>
                            <div class="mt-2 inline-block"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Remember me</span></label></div>
                            <div class="text-center mt-5"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md w-full text-center">Sign in</button></div>
                         </form>
                      </div>
                   </div>
                   <div class="flex flex-wrap mt-6 relative">
                      <div class="w-1/2"><a href="javascript:;" class="text-blueGray-500 ml-2"><small>Forgot password?</small></a></div>
                      <div class="w-1/2 text-right"><a href="javascript:;" class="text-blueGray-500 mr-2"><small>Create new account</small></a></div>
                   </div>
                </div>
             </div>
          </div>
          <footer class="w-full absolute bottom-0">
             <div class="container mx-auto px-4">
                <div class="items-center xl:justify-between flex flex-wrap -mx-4">
                   <div class="px-4 relative w-full xl:w-6/12 w-full sm:w-full">
                      <div class="text-sm text-blueGray-200 text-center xl:text-left py-6">Copyright © 2021<a href="https://www.creative-tim.com" target="_blank" class="text-blueGray-100 font-semibold ml-1">Creative Tim</a>. All rights reserved.</div>
                   </div>
                   <div class="px-4 relative w-full xl:w-6/12 w-full sm:w-full">
                      <ul class="justify-center xl:justify-end mx-auto flex flex-wrap list-none pl-0 mb-0">
                         <li><a href="https://www.creative-tim.com" target="_blank" class="text-sm block py-2 px-4 bg-transparent no-underline text-white hover:text-blueGray-100 py-4 md:py-6 mx-auto">Creative Tim</a></li>
                         <li><a href="https://www.creative-tim.com/presentation" target="_blank" class="text-sm block py-2 px-4 bg-transparent no-underline text-white hover:text-blueGray-100 py-4 md:py-6 mx-auto">About us</a></li>
                         <li><a href="https://www.creative-tim.com/blog" target="_blank" class="text-sm block py-2 px-4 bg-transparent no-underline text-white hover:text-blueGray-100 py-4 md:py-6 mx-auto">Blog</a></li>
                      </ul>
                   </div>
                </div>
             </div>
          </footer>
       </section>
    </main>
 </div>

<div class="w-full">
    <nav class="absolute w-full z-50 flex flex-wrap items-center justify-between px-2 py-3 mb-3 lg:bg-transparent bg-white">
       <div class="flex container mx-auto flex flex-wrap items-center justify-between px-0 lg:px-4">
          <a class="text-sm font-bold leading-relaxed inline-flex items-center mr-4 py-2 whitespace-nowrap uppercase lg:text-white text-blueGray-500" href="#/"><img class="rounded-full mr-2" style="width: 30px;"><span>Notus Design System PRO</span></a><button class="ml-auto cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-blueGray-400 rounded bg-transparent block outline-none focus:outline-none text-blueGray-300 lg:hidden" type="button"><i class="fas fa-bars"></i></button>
          <div class="items-center w-full lg:flex lg:w-auto flex-grow duration-300 transition-all ease-in-out hidden">
             <ul class="lg:items-center flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
                <li><a href="javascript:;" class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out lg:text-white text-blueGray-500"><i class="lg:text-blueGray-300 text-blueGray-500 far fa-file-alt text-lg leading-lg mr-2"></i> Docs</a></li>
             </ul>
             <ul class="lg:items-center lg:ml-auto flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row">
                <li class="relative">
                   <a class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out lg:text-white text-blueGray-800" href="javascript:;">Demo Pages <i class="ml-1 fas fa-caret-down transition-all duration-200 ease-in-out transform "></i></a>
                   <div class="hidden  z-50">
                      <div class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in-out transform scale-95 opacity-0 absolute "><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 1</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 1</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 2</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 2</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 3</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 4</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 3</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 5</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 6</a><span class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400">Group 4</span><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 7</a><a href="javascript:;" class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100">Demo Page 8</a></div>
                   </div>
                </li>
                <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out lg:text-white text-blueGray-500" href="https://www.facebook.com/CreativeTim" target="_blank"><i class="fab fa-facebook text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Share on Facebook</span></a></li>
                <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out lg:text-white text-blueGray-500" href="https://twitter.com/CreativeTim" target="_blank"><i class="fab fa-twitter text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Tweet on Twitter</span></a></li>
                <li><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug hover:opacity-75 transition-all duration-150 ease-in-out lg:text-white text-blueGray-500" href="https://github.com/creativetimofficial" target="_blank"><i class="fab fa-github text-lg leading-lg opacity-75 hover:opacity-50 lg:text-white text-blueGray-500"></i><span class="lg:hidden lg:ml-0 ml-2">Star on Github</span></a></li>
             </ul>
          </div>
       </div>
    </nav>
    <section class="flex relative items-center p-0 min-h-screen-60 max-h-440-px">
       <div class="absolute w-full h-full block bg-blueGray-900 opacity-75 z-1 left-0 top-0"></div>
       <div class="bg-blueGray-800 w-full h-full absolute bg-cover bg-50 z-0" style="background-image: url('../../assets/img/night-sky.jpg');"></div>
       <div class="relative h-full text-center text-white container mx-auto px-4 z-3 mb-16">
          <div class="justify-center flex flex-wrap -mx-4">
             <div class="px-12 px-4 relative w-full lg:w-6/12 w-full md:w-8/12">
                <h1 class="text-4xl font-bold leading-tight">Welcome Back!</h1>
                <p class="text-lg opacity-75 pt-2">Use these awesome forms to login or create new account in your project for free.</p>
             </div>
          </div>
       </div>
       <div class="w-full bottom-0 absolute z-2">
          <div class="w-full pointer-events-none overflow-hidden h-70-px" style="transform: translateZ(0px);">
             <svg class="absolute bottom-0 overflow-hidden" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.1" viewBox="0 0 2560 100" x="0" y="0">
                <polygon class="text-blueGray-100 fill-current" points="2560 0 2560 100 0 100"></polygon>
             </svg>
          </div>
       </div>
    </section>
    <section class="relative bg-blueGray-100 py-12 z-2">
       <div class="container mx-auto px-4">
          <div class="justify-between items-center flex flex-wrap -mx-4">
             <div class="mx-auto px-4 relative w-full lg:w-5/12 -mt-56">
                <div class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100">
                   <div class="rounded-t-lg bg-blueGray-800 mb-0 px-6 py-6">
                      <div class="text-center mb-3">
                         <h6 class="text-blueGray-300 text-sm font-bold">Signup with</h6>
                      </div>
                      <div class="text-center"><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-twitter-regular border-twitter-regular active:bg-twitter-active active:border-twitter-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="mr-1 fab fa-twitter"></i> twitter</a><a href="javascript:;" class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-facebook-regular border-facebook-regular active:bg-facebook-active active:border-facebook-active text-sm px-6 py-2 shadow hover:shadow-lg rounded-md"><i class="mr-1 fab fa-facebook"></i> facebook</a></div>
                   </div>
                   <div class="flex-auto px-4 lg:px-10 py-6">
                      <div class="text-blueGray-500 text-center mb-3 font-bold"><small>Or Register with credentials</small></div>
                      <form>
                         <div class="relative w-full">
                            <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Email</label>
                            <div class="mb-3 pt-0"><input placeholder="Email" type="email" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
                         </div>
                         <div class="relative w-full">
                            <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Password</label>
                            <div class="mb-3 pt-0"><input placeholder="Password" type="password" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
                         </div>
                         <div class="relative w-full">
                            <label class="block uppercase text-blueGray-700 text-xs font-bold mb-2 ml-1">Password Confirmation</label>
                            <div class="mb-3 pt-0"><input placeholder="Password again" type="password" class="border-transparent shadow px-3 py-2 text-sm  w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div>
                         </div>
                         <div class="mt-2 inline-block"><label class="inline-flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox appearance-none ml-1 w-5 h-5 ease-linear transition-all duration-150 border border-blueGray-300 rounded checked:bg-blueGray-700 checked:border-blueGray-700 focus:border-blueGray-300"><span class="ml-2 text-sm font-semibold text-blueGray-500">Subscribe to Newsletter</span></label></div>
                         <div class="text-center mt-6"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-blueGray-800 border-blueGray-800 active:bg-blueGray-900 active:border-blueGray-900 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Register</button></div>
                      </form>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </section>
    <div class="pt-12 pb-4 border-b bg-blueGray-100">
       <div class="container mx-auto px-4">
          <div class="justify-between items-center flex flex-wrap -mx-4">
             <div class="px-4 relative w-full lg:w-6/12">
                <h3 class="text-xl font-bold leading-normal mt-0">Thank you for supporting us!</h3>
                <h4 class="leading-normal mt-1 mb-2 text-blueGray-500">Let's get in touch on any of these platforms.</h4>
             </div>
             <div class="text-right pr-6 px-4 relative w-full lg:w-6/12"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-twitter"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-facebook"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-dribbble"></i></button><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-blueGray-800 bg-white border-white active:bg-blueGray-100 active:border-blueGray-100 text-xs px-3 py-2 shadow hover:shadow-md rounded-md"><i class="fab fa-github"></i></button></div>
          </div>
       </div>
    </div>
    <footer class="bg-blueGray-100">
       <div class="container mx-auto px-4">
          <div class="items-center xl:justify-between flex flex-wrap -mx-4">
             <div class="px-4 relative w-full xl:w-6/12 w-full sm:w-full">
                <div class="text-center xl:text-left py-6 text-sm text-blueGray-500">Copyright © 2021<a href="https://www.creative-tim.com" target="_blank" class="font-semibold ml-1">Creative Tim</a>. All rights reserved.</div>
             </div>
             <div class="px-4 relative w-full xl:w-6/12 w-full sm:w-full">
                <ul class="justify-center xl:justify-end mx-auto flex flex-wrap list-none pl-0 mb-0">
                   <li><a href="https://www.creative-tim.com" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">Creative Tim</a></li>
                   <li><a href="https://www.creative-tim.com/presentation" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">About us</a></li>
                   <li><a href="https://www.creative-tim.com/blog" target="_blank" class="text-sm block px-4 bg-transparent no-underline text-blueGray-500 hover:text-blueGray-700 py-4 md:py-6 mx-auto">Blog</a></li>
                </ul>
             </div>
          </div>
       </div>
    </footer>
 </div>