Tailwind CSS Header Blocks

<header class="header">
    <div class="header-body">
        <a class="flex items-center" title="frutjam">
            <svg width="32" height="32" class="mr-3 h-8" viewBox="0 0 240.000000 240.000000"
                preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
                <desc>Frutjam logo</desc>
                <rect x="34.468" y="34.397" width="171.631" height="171.064" stroke="rgb(0, 0, 0)"
                    fill="rgb(255, 255, 255)"></rect>
                <g transform="translate(0.000000,240.000000) scale(0.100000,-0.100000)" fill="#1529ff"
                    stroke="none">
                    <path
                        d="M723 2319 c-225 -16 -369 -68 -471 -171 -92 -91 -136 -195 -164 -387 -18 -120 -18 -1002 0 -1122 28 -192 72 -298 163 -388 88 -88 192 -133 374 -162 105 -16 823 -24 1012 -10 305 22 448 80 557 225 108 145 136 327 136 896 0 496 -19 671 -90 816 -51 106 -118 173 -224 224 -97 47 -188 67 -373 80 -160 11 -756 11 -920 -1z m909 -433 c180 -40 266 -124 306 -300 23 -104 23 -698 0 -802 -41 -182 -133 -267 -329 -305 -87 -17 -707 -18 -806 -1 -201 34 -300 122 -340 304 -23 106 -24 700 0 804 20 92 55 161 106 207 110 99 227 118 706 112 207 -3 309 -8 357 -19z">
                    </path>
                    <path
                        d="M951 1535 c-48 -15 -85 -45 -109 -90 -14 -25 -17 -63 -17 -230 0 -110 3 -212 8 -227 13 -48 64 -96 120 -113 72 -21 422 -21 494 0 56 17 107 65 120 113 10 35 10 399 0 434 -13 48 -64 96 -120 113 -68 20 -431 20 -496 0z">
                    </path>
                </g>
            </svg>
            <span>Frutjam</span>
        </a>

        <!-- for large screen -->
        <div class="hidden lg:block">
            <nav class="navbar navbar-x-center">
                <ul class="navbar-list gap-x-6">
                    <li>
                        <a class="link link-xs link-hover">About</a>
                    </li>
                    <li>
                        <a class="link link-xs link-hover">Pricing</a>
                    </li>
                    <li>
                        <a class="link link-xs link-hover">Services</a>
                    </li>
                    <li>
                        <a class="link link-xs link-hover">Blog</a>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="hidden lg:block">
            <div class="flex justify-center gap-x-2">
                <a class="btn btn-outline btn-sm">Login</a>
                <a class="btn btn-neutral btn-sm">Sign up</a>
            </div>
        </div>

        <!-- for small screen -->
        <div class="block lg:hidden">
            <button type="button" class="btn-base btn-sm btn-ghost" onclick="headerToggleMenu3.show()">
                <span class="sr-only">Menu</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="4" x2="20" y1="10" y2="10"></line>
                    <line x1="4" x2="20" y1="20" y2="20"></line>
                </svg>
            </button>
            <dialog class="drawer drawer-bottom" id="headerToggleMenu3">
                <div class="drawer-body">
                    <ul class="menu p-4">
                        <li><a class="menu-item">About</a></li>
                        <li>
                            <div class="accordion accordion-flush">
                                <details>
                                    <summary>Resources</summary>
                                    <div class="accordion-body">
                                        <ul>
                                            <li><a class="menu-item">Help center</a></li>
                                            <li><a class="menu-item">Products</a></li>
                                        </ul>
                                    </div>
                                </details>
                            </div>
                        </li>
                        <li><a class="menu-item">Pricing</a></li>
                    </ul>
                </div>
                <button type="button" class="drawer-backdrop" onclick="headerToggleMenu3.close()">Close Drawer via
                    Backdrop</button>
            </dialog>
        </div>
    </div>
</header>