Code Examples
            
            
<header class="header relative top-0 z-10 border-b border-gray-100">
    <div class="bg-gray-50 border-b border-gray-100">
        <div class="max-w-screen-xl mx-auto px-3 flex">
            <div class="flex-1 flex items-center">
                <a href="#" class="py-3 px-3 text-sm text-gray-500 hover:text-gray-900">
                    <i class="fa fa-home"></i> 사이트이동
                </a>
            </div>
            <div class=" flex justify-end">
                <a href="#" class="py-3 px-3 text-sm text-gray-500 hover:text-gray-900"><i class="fas fa-exchange-alt"></i> 프로필전환</a>
                <a href="#" class="py-3 px-3 text-sm text-gray-500 hover:text-gray-900"><i class="fas fa-sign-out-alt"></i> 로그아웃</a>
            </div>
        </div>
    </div>
    <div class="max-w-screen-xl mx-auto px-3 pt-6 pb-6">
        <div class="flex flex-wrap">
            <div class="flex">
                <div class="sideNavBtn flex lg:hidden cursor-pointer p-3" data-component="sideNav" data-target="sideNav">
                    <i class="fas fa-bars"></i>
                </div>
                <div class="flex items-center">
                    <a href="#" class="text-lg lg:text-2xl font-semibold text-black whitespace-nowrap break-normal">
                        LOGO
                    </a>
                </div>
            </div>
            <div class="hidden lg:flex items-center px-5 lg:px-5 ml-5">
                <a href="#" class="inline-block py-1 text-lg font-normal text-gray-500 hover:text-gray-800 mx-3 ">HOME</a>
                <a href="#" class="inline-block py-1 text-lg font-normal text-gray-500 hover:text-gray-800 mx-3 ">Service</a>
                <a href="#" class="inline-block py-1 text-lg font-normal text-gray-500 hover:text-gray-800 mx-3 ">Product</a>
                <a href="#" class="inline-block py-1 text-lg font-normal text-gray-500 hover:text-gray-800 mx-3 ">Customer</a>
            </div>
            <div class="flex-1"></div>
            <div class="relative hidden lg:flex justify-end">
                <a href="javascript:void(0)" class="dropdown flex items-center text-coolGray-700 px-3 pt-1 pb-1 font-normal hover:text-coolGray-500 text-base" data-placement="bottom" data-toggle="popover" data-html="true" data-dropdown-content="#account-dropdown">
                    <div class="flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full mr-2 text-gray-500">
                        <i class="fa fa-user"></i>
                    </div>
                </a>
                <a href="#" class="flex items-center text-gray-700 px-3 pt-1 pb-1 font-normal hover:text-gray-500 text-base">정회원</a>
                <a href="#" class="flex items-center text-gray-700 px-3 pt-1 pb-1 font-normal hover:text-gray-500 text-base">로그인</a>
            </div>
        </div>
    </div>
</header>