Header

<div class="relative px-2 mx-auto bg-gray-200 font-heading">

    <div class="flex content-center justify-between max-w-6xl mx-auto">
        <div class="w-4/5 p-2 mt-1 mr-2 md:w-full sm:mt-2">
            <a class="inline-block" href="#">
                <img src="https://via.placeholder.com/250x100/a0aec0/cbd5e0&text=logo" srcset="https://via.placeholder.com/250x100/a0aec0/cbd5e0&text=logo 1x, https://via.placeholder.com/500x200/a0aec0/cbd5e0&text=logo 2x" alt="logo" width="250" height="100" />
            </a>
        </div>
        <div class="w-1/5 pt-4 pr-1 text-right md:hidden">
            <button class="text-gray-800 toggle-button">
                <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 mx-auto fill-current">
                    <title>
                        Menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </div>

        <div class="flex-col items-end justify-center hidden w-full md:flex">

            <ul class="flex text-3xl">
                <li class="mr-2">
                    <a class="text-gray-800 transition duration-100 opacity-75 hover:text-gray-800 hover:opacity-100" 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-800 transition duration-100 opacity-75 hover:text-gray-800 hover:opacity-100" 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-800 transition duration-100 opacity-75 hover:text-gray-800 hover:opacity-100" 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-800 transition duration-100 opacity-75 hover:text-gray-800 hover:opacity-100" 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-800 transition duration-100 opacity-75 hover:text-gray-800 hover:opacity-100" 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 class="flex mt-2 mr-2">

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

                    <label class="sr-only" for="searchHeader">
                        Search
                    </label>
                    <div class="relative">
                        <input id="searchHeader" class="w-64 py-2 pl-10 pr-3 leading-tight text-gray-900 placeholder-gray-600 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>

            </div>
        </div>

    </div>

</div>