Header: Branded

<style>
    :root {
        --primary: 0, 126, 204;
    }
</style>

<header x-data="{ open: false }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex justify-between">
        <div class="flex-shrink-0 flex items-center">
            <img class="h-20 w-auto" src="/assets/img/logo.png" alt="">
        </div>
        <div class="flex-shrink-0 hidden lg:flex items-center">
            <span class="text-sm italic mr-2 opacity-50">powered by</span>
            <img class="h-20 w-auto" src="/assets/img/logo.png" alt="">
        </div>
        <div class="-mr-2 flex items-center lg:hidden">
            <!-- Mobile menu button -->
            <button type="button" class="bg-gray-100 border border-gray-200 inline-flex items-center justify-center p-2 rounded-full text-primary hover:text-pink focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" aria-controls="mobile-menu" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()">
                <span class="sr-only">Open main menu</span>
                <svg x-state:on="Menu open" x-state:off="Menu closed" class="h-8 w-8 block" :class="{ 'hidden': open, 'block': !(open) }" x-description="Heroicon name: outline/menu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
                <svg x-state:on="Menu open" x-state:off="Menu closed" class="h-8 w-8 hidden" :class="{ 'block': open, 'hidden': !(open) }" x-description="Heroicon name: outline/x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
    </div>
    <div class="bg-light lg:bg-primary hidden lg:block min-h-full lg:min-h-auto" :class="{'hidden':!open}">
        <div class="max-w-7xl mx-auto px-6 lg:px-6 py-4 flex flex-col lg:flex-row justify-between">
            <div class="flex flex-col lg:flex-row lg:space-x-4 -ml-4">
                <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light font-bold">Home</a>
                <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light">My TRS</a>
                <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light">HR Hub</a>
                <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light">News</a>
                <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light">Documents</a>
                <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light">Tools</a>
            </div>
            <div class="flex items-center text-dark lg:text-light text-lg mt-2 lg:mt-0 border-t lg:border-0 py-4 lg:py-0">
                <div class="pr-4 mr-2 border-r">Brett Hill</div>
                <a href="#" class="p-2 hover:opacity-80 focus:outline-none focus:ring-1 focus:ring-light">
                    <svg class="w-7 h-7" viewBox="0 0 27 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g id="UX-Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Kinetic-UX-Components-1-of-2" transform="translate(-1696.000000, -368.000000)" fill="currentColor" fill-rule="nonzero">
                                <g id="Group" transform="translate(118.000000, 220.000000)">
                                    <g id="Group-7" transform="translate(1479.000000, 148.000000)">
                                        <g id="person-circle-outline-(1)" transform="translate(99.000000, 0.000000)">
                                            <path d="M13.6888455,0.00125428445 C6.09674302,-0.101284144 -0.101289012,6.09645 0.00125434474,13.6881876 C0.102499685,20.969065 6.03119315,26.8974735 13.3124205,26.998714 C20.905821,27.1025504 27.102555,20.9048162 26.9987137,13.3130786 C26.8987663,6.03090328 20.9700729,0.102494758 13.6888455,0.00125428445 Z M21.8936121,21.2390396 C21.8412728,21.2956368 21.7664857,21.3260461 21.6894996,21.3220339 C21.6125136,21.3180218 21.5412929,21.2800034 21.4951208,21.2182723 C20.9146144,20.4588022 20.2037059,19.8085774 19.395578,19.2979482 C17.7432022,18.2375191 15.6495005,17.6534395 13.500633,17.6534395 C11.3517656,17.6534395 9.25806386,18.2375191 7.60568799,19.2979482 C6.79758945,19.8083509 6.08667896,20.4583577 5.5061452,21.2176233 C5.45997317,21.2793544 5.38875245,21.3173729 5.31176641,21.321385 C5.23478036,21.3253971 5.15999321,21.2949878 5.10765393,21.2383906 C3.20325167,19.1826683 2.12448267,16.4965055 2.07808183,13.6946774 C1.97229343,7.37947831 7.15462702,2.09355741 13.4727256,2.07794658 C19.7908243,2.0624065 24.9231875,7.19257282 24.9231875,13.4999841 C24.9253606,16.3693775 23.8432478,19.1336396 21.8936121,21.2390396 Z" id="Shape"></path>
                                            <path d="M13.4995382,6 C12.1944565,6 11.0144561,6.51319444 10.1759477,7.44583333 C9.33743931,8.37847222 8.91851602,9.66805556 9.0131543,11.0520833 C9.20507808,13.7777778 11.2176306,16 13.4995382,16 C15.7814459,16 17.7900276,13.7777778 17.9859222,11.0527778 C18.0838695,9.68194444 17.6682552,8.40416667 16.8158489,7.45416667 C15.9740315,6.51666667 14.7960165,6 13.4995382,6 Z" id="Path"></path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </a>
            </div>
            <div class="flex-shrink-0 flex items-center justify-end lg:hidden">
                <span class="text-sm italic mr-2">powered by</span>
                <img class="h-20 w-auto" src="/assets/img/logo.png" alt="">
            </div>
        </div>
    </div>

</header>