Page Header

<div class="bg-blue-800 text-white p-4">

    <div class="flex justify-between content-center">
        <div class="w-4/5 md:w-full">
            <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" width="250" height="100" alt="logo" />
            </a>
        </div>
        <div class="w-1/5 md:hidden text-right pr-1 pt-2">
            <button class="toggle-button text-white">
                <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="fill-current h-8 w-8 mx-auto">
                    <title>
                        Menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </div>

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

            <ul class="mb-2 flex text-gray-500 text-sm">
                <li><a class="mr-4" href="">Groups & Meetings</a></li>
                <li><a class="mr-4" href="">Weddings</a></li>
                <li><a class="mr-2" href="">How to Get Here</a></li>
            </ul>

            <div class="mt-2 flex mr-2">
                <form action="https://lethbridgesportcouncil.ca/search/results">

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

                </form>
            </div>
        </div>

    </div>

</div>

<div class="bg-blue-700">
    <div class="hidden md:block">
        <div class="nav flex justify-between items-center font-medium text-white text-center">

            <a class="flex-auto px-3 py-3 text-center hover:bg-blue-900" href="">Places to Stay</a>
            <a class="flex-auto px-3 py-3 text-center hover:bg-blue-900" href="">Things to Do</a>
            <a class="flex-auto px-3 py-3 text-center hover:bg-blue-900" href="">Services</a>
            <a class="flex-auto px-3 py-3 text-center hover:bg-blue-900" href="">Local Info</a>
            <a class="flex-auto px-3 py-3 text-center hover:bg-blue-900" href="">Events</a>

        </div>
    </div>
</div>