Slideout Navigation

<div class="z-50 max-w-sm bg-gray-900 h-screen slideout-menu slideout-menu-right">

    <ul class="flex flex-col text-white">

        <li class="px-3 pt-6 pb-3">

            <form action="http://example.com/search/results">

                <label class="sr-only" for="searchSlideout">
                    Search
                </label>
                <div class="relative">
                    <input id="searchSlideout" class="py-2 pl-10 pr-3 leading-tight text-gray-900 placeholder-gray-700 transition duration-100 bg-gray-400 rounded-md shadow-sm outline-none appearance-none focus:bg-white focus:placeholder-transparent" type="search" name="q" value="" placeholder="Search this site">
                    <div class="absolute inset-y-0 left-0 flex items-center px-2 text-gray-700 pointer-events-none">
                        <i class="pl-1 text-base text-gray-600 fas fa-search"></i>
                    </div>
                </div>

            </form>

        </li>

        <li>
            <a class="block px-5 py-2 text-lg font-medium text-gray-100 uppercase transition duration-100 opacity-75 font-heading hover:opacity-100 hover:text-white hover:bg-gray-800 focus:bg-gray-800" href="#">
                Home
            </a>
        </li>
        <li>
            <a class="block px-5 py-2 text-lg font-medium text-gray-100 uppercase transition duration-100 opacity-75 font-heading hover:opacity-100 hover:text-white hover:bg-gray-800 focus:bg-gray-800 programs" href="#">
                Tour
            </a>
        </li>
        <li>
            <a class="block px-5 py-2 text-lg font-medium text-gray-100 uppercase transition duration-100 opacity-75 font-heading hover:opacity-100 hover:text-white hover:bg-gray-800 focus:bg-gray-800 news" href="#">
                Product
            </a>
        </li>
        <li>
            <a class="block px-5 py-2 text-lg font-medium text-gray-100 uppercase transition duration-100 opacity-75 font-heading hover:opacity-100 hover:text-white hover:bg-gray-800 focus:bg-gray-800 events" href="#">
                Features
            </a>
        </li>
        <li>
            <a class="block px-5 py-2 text-lg font-medium text-gray-100 uppercase transition duration-100 opacity-75 font-heading hover:opacity-100 hover:text-white hover:bg-gray-800 focus:bg-gray-800 sport-directory" href="#">
                Support
            </a>
        </li>

        <li>
            <hr class="my-4 border-b-4 border-gray-600">
        </li>

        <li>
            <a class="block px-5 py-2 text-base text-gray-100 transition duration-100 opacity-75 covid-19-updates hover:opacity-100 hover:bg-gray-800 focus:bg-gray-800" href="#">
                Resource
            </a>
        </li>
        <li>
            <a class="block px-5 py-2 text-base text-gray-100 transition duration-100 opacity-75 about-us hover:opacity-100 hover:bg-gray-800 focus:bg-gray-800" href="#">
                Another Resource
            </a>
        </li>
        <li>
            <a class="block px-5 py-2 text-base text-gray-100 transition duration-100 opacity-75 membership hover:opacity-100 hover:bg-gray-800 focus:bg-gray-800" href="#">
                About Us
            </a>
        </li>

    </ul>

    <ul class="flex px-5 mt-6 mb-6 text-3xl">
        <li class="mr-2">
            <a class="text-gray-200 transition duration-100 opacity-50 hover:opacity-100 hover:text-white" href="https://www.facebook.com/username" title="Facebook" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Facebook','https://www.facebook.com/username')">
                <i class="fab fa-facebook-square"></i>
            </a>
        </li>
        <li class="mr-2">
            <a class="text-gray-200 transition duration-100 opacity-50 hover:opacity-100 hover:text-white" href="https://twitter.com/username" title="Twitter" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Twitter','https://twitter.com/username')">
                <i class="fab fa-twitter-square"></i>
            </a>
        </li>
        <li class="mr-2">
            <a class="text-gray-200 transition duration-100 opacity-50 hover:opacity-100 hover:text-white" href="https://www.instagram.com/username/" title="Instagram" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Instagram','https://www.instagram.com/username/')">
                <i class="fab fa-instagram"></i>
            </a>
        </li>
        <li class="mr-2">
            <a class="text-gray-200 transition duration-100 opacity-50 hover:opacity-100 hover:text-white" href="https://ca.linkedin.com/company/username" title="LinkedIn" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - LinkedIn','https://ca.linkedin.com/company/username')">
                <i class="fab fa-linkedin"></i>
            </a>
        </li>
        <li class="mr-2">
            <a class="text-gray-200 transition duration-100 opacity-50 hover:opacity-100 hover:text-white" href="https://www.youtube.com/user/username" title="YouTube" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - YouTube','https://www.youtube.com/user/username')">
                <i class="fab fa-youtube-square"></i>
            </a>
        </li>
    </ul>

</div>