Homepage

<div class="bg-gray-900 h-screen">
    <div class="max-w-4xl mx-auto">
        <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>
        <div class="bg-white p-4">
            Homepage
        </div>

        <div class="pt-8 p-4 text-gray-500 bg-gray-900">
            <p>&copy; 2020 Kananaskis.com</p>
            <p class="text-sm">Your Adventure Guide to Kananaskis Country and surrounding areas including Canmore, Banff & Lake Louise and Bragg
                Creek.
            </p>

            <ul class="flex flex-col sm:flex-row mt-4 text-green-500">
                <li><a class="mr-4" href="">Advertise</a></li>
                <li><a class="mr-4" href="">Privacy Policy</a></li>
                <li><a class="mr-4" href="">Terms</a></li>
                <li><a class="mr-4" href="">Website Credits</a></li>
            </ul>
        </div>
    </div>
    <!---->
</div>