Header sections

<!-- This example requires Tailwind CSS v2.0+ -->
<!-- This example requires Alpine.js -->
<header class="w-full flex flex-col border-b-2 border-gray-700 shadow">
    <div x-data="{ open: false }" class="max-w-7xl mx-auto container">
        <nav id="site-menu" class="flex flex-col md:flex-row w-full justify-between items-center px-4 md:px-6 py-2 bg-opacity-0">
            <div class="w-full md:w-auto self-start flex flex-row md:flex-none flex-no-wrap justify-between items-center">
                <a href="#" class="no-underline py-1">
                   <!-- SVG of your logo -->
                   <svg class="h-6 w-6" viewbox="0 0 63 70" xmlns="http://www.w3.org/2000/svg"></svg>
                </a>
                <!-- SVG of hamburger menu -->
                <div x-on:click="open = ! open" class="inline-block cursor-pointer md:hidden focus:outline-none">
                    <svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </div>
            </div>
            <div class="font-medium text-gray-700 no-underline text-sm text-center">
                <div x-bind:class="! open ? 'hidden' : 'flex'" class="w-full md:w-auto self-end md:self-center md:flex flex-col md:flex-row items-center py-1 pb-4 sm:py-0 sm:pb-0">
                    <a class="w-full md:w-auto lg:pr-10 sm:pr-5 py-2 hover:text-blue-500" href="#">Home</a>
                    <a class="w-full md:w-auto lg:pr-10 sm:pr-5 py-2 hover:text-blue-500" href="#">About</a>
                    <a class="w-full md:w-auto py-2 hover:text-blue-500" href="#">Contact</a>
                </div>
            </div>
        </nav>
    </div>
</header>
<!-- This example requires Tailwind CSS v2.0+ -->
<!-- This example requires Alpine.js -->
<header class="w-full flex flex-col bg-green-100">
    <div x-data="{ open: false }" class="max-w-7xl mx-auto container">
        <nav class="flex flex-col md:flex-row w-full justify-between items-center px-4 md:px-6 py-2">
            <div class="flex flex-col md:flex-row w-full justify-start">
                <div class="w-full md:w-auto self-start flex flex-row md:flex-none flex-no-wrap justify-between items-center">
                    <a href="#" class="no-underline py-1">
                        <!-- SVG of your logo -->
                        <svg class="h-6 w-6" viewbox="0 0 63 70" xmlns="http://www.w3.org/2000/svg"></svg>
                    </a>
                    <div x-on:click="open = ! open" class="inline-block cursor-pointer md:hidden focus:outline-none">
                        <!-- SVG of hamburger menu -->
                        <svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </div>
                </div>
                <div class="font-medium text-gray-600 no-underline text-sm text-center">
                    <div x-bind:class="! open ? 'hidden' : 'flex'" class="w-full md:w-auto font-medium self-end md:self-center md:flex flex-col md:flex-row items-center py-1 pb-4 sm:py-0 sm:pb-0 ">
                        <a class="w-full md:w-auto lg:pr-10 sm:pr-5 py-2 sm:py-1 sm:pt-2 hover:text-green-500" href="#">Home</a>
                        <a class="w-full md:w-auto lg:pr-10 sm:pr-5 py-2 sm:py-1 sm:pt-2 hover:text-green-500" href="#">About</a>
                        <a class="w-full md:w-auto lg:pr-10 sm:pr-5 py-2 sm:py-1 sm:pt-2 hover:text-green-500" href="#">Contact</a>
                    </div>
                </div>
            </div>
            <div x-bind:class="! open ? 'hidden' : 'flex'" class="w-full md:w-auto self-end md:self-center md:flex flex-col md:flex-row items-center py-1 pb-4 sm:py-0 sm:pb-0 ">
                <input class="px-4 md:mr-4 py-2 sm:py-1 sm:pt-2 text-sm   text-center   rounded-2xl focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="SEARCH HERE" type="text">
                <a class="text-green-100 text-sm w-full no-underline md:w-auto  sm:px-5 py-2 sm:py-2 sm:mt-0 mt-3 text-center font-bold bg-gray-800 rounded-2xl whitespace-nowrap" href="#">CALL NOW</a>
            </div>
        </nav>
    </div>
</header>
<!-- This example requires Tailwind CSS v2.0+ -->
<!-- This example requires Alpine.js -->
<header class="w-full flex flex-col shadow">
    <div x-data="{ open: false }" class="max-w-7xl mx-auto container">
        <nav id="site-menu" class="flex flex-col md:flex-row w-full justify-between items-center px-4 md:px-6 py-2 bg-opacity-0">
            <div class="w-full md:w-auto self-start flex flex-row md:flex-none flex-no-wrap justify-between items-center">
                <a href="#" class="no-underline py-1">
                     <!-- SVG of your logo -->
                    <svg class="h-6 w-6" viewbox="0 0 63 70" xmlns="http://www.w3.org/2000/svg"></svg>
                </a>
                <div x-on:click="open = ! open" class="inline-block cursor-pointer md:hidden focus:outline-none">
                        <!-- SVG of hamburger menu -->
                        <svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                </div>
            </div>
            <div class="text-gray-600 text-sm no-underline text-center font-medium">
                <div x-bind:class="! open ? 'hidden' : 'flex'" class="w-full md:w-auto self-end md:self-center md:flex flex-col md:flex-row items-center py-1 pb-4 sm:py-0 sm:pb-0 ">
                    <a class="w-full md:w-auto lg:pr-10 sm:pr-5 py-2 sm:py-1 sm:pt-2  hover:text-gray-800" href="#">Home</a>
                    <a class="w-full md:w-auto lg:pr-10 sm:pr-5 py-2 sm:py-1 sm:pt-2 hover:text-gray-800" href="#">About</a>
                    <a class="w-full md:w-auto  py-2 sm:py-1 sm:pt-2  hover:text-gray-800" href="#">Contact</a>
                </div>
            </div>
            <div x-bind:class="! open ? 'hidden' : 'flex'" class="w-full md:w-auto self-end md:self-center md:flex flex-col md:flex-row items-center py-1 pb-4 sm:py-0 sm:pb-0 ">
                <a class="text-gray-300 text-sm w-full no-underline md:w-auto px-4 py-2 sm:py-2 sm:pt-2  text-center font-bold bg-gray-800 rounded-2xl" href="#">CALL NOW</a>
            </div>
        </nav>
    </div>
</header>
<header class="w-full flex flex-col bg-red-100 border-b-4 border-red-200">
    <div class="max-w-7xl mx-auto container">
        <nav class="flex  w-full justify-center items-center px-4 md:px-6 py-2">
            <div class="w-auto self-center flex  items-center py-1 pb-4 sm:py-0 sm:pb-0 text-gray-600 text-sm font-medium no-underline">
                <a class="w-auto lg:pr-10 pr-5 py-2 text-center hover:text-red-500 uppercase" href="#">Home</a>
                <a class="w-auto lg:pr-10 pr-5 py-2 text-center hover:text-red-500 uppercase" href="#">About</a>
                <a class="w-auto py-2 text-center hover:text-red-500 uppercase" href="#">Contact</a>
            </div>
        </nav>
    </div>
</header>