<ul class="flex flex-col lg:flex-row list-none lg:ml-auto items-center">
    <li class="inline-block relative">
        <a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="#pablo" onclick="openDropdown(event,'demo-pages-dropdown')"> Demo Pages </a>
        <div class="hidden bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 navbar-popper" id="demo-pages-dropdown">
            <span class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"> Admin Layout </span>
            <a href="./pages/admin/dashboard.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Dashboard </a>
            <a href="./pages/admin/settings.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Settings </a>
            <a href="./pages/admin/tables.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Tables </a>
            <a href="./pages/admin/maps.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Maps </a>
            <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100"></div>
            <span class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"> Auth Layout </span>
            <a href="./pages/auth/login.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Login </a>
            <a href="./pages/auth/register.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Register </a>
            <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100"></div>
            <span class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"> No Layout </span>
            <a href="./pages/landing.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Landing </a>
            <a href="./pages/profile.html" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"> Profile </a>
        </div>
    </li>
    <li class="flex items-center">
        <a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-js%2F" target="_blank">
            <i class="text-blueGray-400 fab fa-facebook text-lg leading-lg"></i>
            <span class="lg:hidden inline-block ml-2">Share</span>
        </a>
    </li>
    <li class="flex items-center">
        <a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-js%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20JavaScript%20UI%20Kit%20and%20Admin.%20Let%20Notus%20JS%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level." target="_blank">
            <i class="text-blueGray-400 fab fa-twitter text-lg leading-lg"></i>
            <span class="lg:hidden inline-block ml-2">Tweet</span>
        </a>
    </li>
    <li class="flex items-center">
        <a class="hover:text-blueGray-500 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold" href="https://github.com/creativetimofficial/notus-js?ref=njs-index" target="_blank">
            <i class="text-blueGray-400 fab fa-github text-lg leading-lg"></i>
            <span class="lg:hidden inline-block ml-2">Star</span>
        </a>
    </li>
    <li class="flex items-center">
        <button class="text-white bg-pink-500 active:bg-pink-600 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150" type="button">
            <i class="fas fa-arrow-alt-circle-down"></i> Download </button>
    </li>
</ul>
