<div class="max-w-8xl">
  <div class="flex items-end w-full px-8 py-4 bg-slate-50 dark:bg-slate-900">
    <div class="flex">
      <a href="/" class="flex"
        ><div class="mr-4"><img src="/tailcake-logo.png" class="h-6" /></div>
        <div class="m-auto text-xl font-semibold dark:text-slate-100">TailCake</div></a
      >
    </div>
    <a href="#" class="hidden px-4 py-1 ml-8 text-sm text-green-600 bg-green-200 rounded-lg xl:flex">here goes an important notification with link</a>
    <div class="hidden ml-auto lg:flex">
      <nav>
        <ul class="flex space-x-8 font-semibold text-slate-700 dark:text-slate-100">
          <li><a href="#" class="hover:text-blue-400">Docs</a></li>
          <li><a href="#" class="hover:text-blue-400">Blog</a></li>
          <li><a href="#" class="hover:text-blue-400">Contact</a></li>
        </ul>
      </nav>
    </div>
    <div class="ml-auto flex border-slate-900/10 dark:border-slate-50/[0.06] lg:hidden">
      <button type="button" class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300">
        <span class="sr-only">Navigation</span>
        <svg width="24" height="24"><path d="M5 6h14M5 12h14M5 18h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
      </button>
    </div>
  </div>
</div>

<div class="flex justify-between bg-gray-700 py-4 px-8 text-[0.9rem] text-white">
  <div class="flex items-center">
    <svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 9 2 A 1.0001 1.0001 0 0 0 8.2324219 2.359375 L 7.0390625 3.7929688 C 5.5881336 3.6447838 4.1391499 4.2904406 3.3046875 5.5429688 L 3 6 L 4.0585938 7.3671875 L 3.2460938 8.34375 A 1.0003909 1.0003909 0 0 0 3.234375 8.3554688 L 3.2324219 8.359375 A 1.0003909 1.0003909 0 0 0 3.1738281 8.4355469 A 1.0001 1.0001 0 0 0 3.171875 8.4394531 A 1.0003909 1.0003909 0 0 0 3.0527344 8.6816406 A 1.0003909 1.0003909 0 0 0 3.0449219 8.7050781 A 1.0001 1.0001 0 0 0 3.03125 8.7558594 A 1.0003909 1.0003909 0 0 0 3.0195312 8.8027344 A 1.0001 1.0001 0 0 0 3.0195312 8.8066406 A 1.0003909 1.0003909 0 0 0 3 9.0019531 A 1.0003909 1.0003909 0 0 0 3 9.0039062 A 1.0001 1.0001 0 0 0 3 9.0136719 A 1.0003909 1.0003909 0 0 0 3.0214844 9.203125 A 1.0001 1.0001 0 0 0 3.0253906 9.2207031 A 1.0003909 1.0003909 0 0 0 3.0273438 9.2285156 L 4.7753906 16.976562 C 4.9140251 17.669168 5.118682 18.208227 5.4453125 18.634766 C 5.771943 19.061304 6.1488059 19.300876 6.4804688 19.521484 L 10.890625 22.462891 L 10.890625 22.460938 C 11.560431 22.908807 12.439641 22.909333 13.109375 22.462891 L 17.519531 19.521484 C 17.850586 19.300948 18.230288 19.061199 18.556641 18.634766 C 18.882993 18.208332 19.085975 17.669168 19.224609 16.976562 L 20.953125 9.3144531 A 1.0001 1.0001 0 0 0 20.955078 9.3085938 A 1.0001 1.0001 0 0 0 20.660156 8.2285156 A 1.0001 1.0001 0 0 0 20.65625 8.2265625 L 19.941406 7.3671875 L 21 6 L 20.695312 5.5429688 C 19.861223 4.2910008 18.413168 3.6455695 16.962891 3.7929688 L 15.767578 2.359375 A 1.0001 1.0001 0 0 0 15 2 L 9 2 z M 12 4.8671875 C 12.281436 4.8671875 12.562871 4.9769336 12.783203 5.1972656 A 1.0001 1.0001 0 0 0 13.328125 5.4765625 C 13.882632 5.75751 14.516112 5.8581707 15.091797 5.5703125 L 15.619141 5.3066406 L 18.738281 9.0488281 L 16.337891 12.419922 A 1.0001 1.0001 0 0 0 16.259766 13.447266 L 16.550781 14.03125 C 16.75946 14.450764 16.656482 14.946506 16.296875 15.246094 L 15.984375 15.507812 C 15.657656 15.577455 15.328154 15.615028 15.003906 15.585938 C 14.546906 15.541937 14.108516 15.400641 13.728516 15.181641 C 13.538516 15.073641 13.357172 14.947828 13.201172 14.798828 C 13.12621 14.738694 13.057105 14.657628 13 14.59375 L 13 14 A 1.0001 1.0001 0 0 0 12.939453 13.648438 L 14.447266 12.894531 C 14.786266 12.724531 15 12.379 15 12 L 14 10 L 17 9 L 16.585938 8.5859375 C 16.210937 8.2109375 15.701875 8 15.171875 8 L 14.464844 8 C 14.105844 8 13.777703 8.1929531 13.595703 8.5019531 C 13.297703 9.0109531 13 9.746 13 10 L 14 12 L 12.023438 12.988281 A 1.0001 1.0001 0 0 0 11.984375 12.986328 A 1.0001 1.0001 0 0 0 11.974609 12.986328 L 10 12 L 11 10 C 11 9.746 10.702297 9.0109531 10.404297 8.5019531 C 10.222297 8.1929531 9.8941562 8 9.5351562 8 L 8.6171875 8 C 8.2221875 8 7.8434531 8.1565469 7.5644531 8.4355469 L 7 9 L 10 10 L 9 12 C 9 12.379 9.2137344 12.724531 9.5527344 12.894531 L 11.060547 13.648438 A 1.0001 1.0001 0 0 0 11 14 L 11 14.59375 C 10.944038 14.656278 10.875563 14.736176 10.802734 14.794922 C 10.646734 14.944922 10.465391 15.068734 10.275391 15.177734 C 9.8943906 15.397734 9.458 15.540938 9 15.585938 C 8.7450351 15.608812 8.4852656 15.594672 8.2265625 15.556641 L 7.8554688 15.246094 C 7.495862 14.946506 7.3928838 14.450764 7.6015625 14.03125 L 7.8945312 13.447266 A 1.0001 1.0001 0 0 0 7.8007812 12.400391 L 5.2753906 9.0332031 L 8.2929688 5.4101562 L 9.03125 5.6972656 C 9.7675305 5.9825992 10.608493 5.8055693 11.167969 5.2460938 L 11.216797 5.1972656 C 11.437129 4.9769336 11.718564 4.8671875 12 4.8671875 z M 12 16.279297 C 12.315658 16.490945 12.662133 16.678836 13.001953 16.800781 C 13.361761 16.936684 13.734048 17.023409 14.109375 17.070312 L 12.076172 18.763672 L 10.027344 17.054688 C 10.358839 17.003629 10.687438 16.919405 11.005859 16.798828 C 11.342256 16.677575 11.686752 16.489059 12 16.279297 z" /></svg>
    <span class="ml-4 font-bold">Brand</span>
  </div>
  <nav class="hidden lg:flex">
    <ul class="flex font-semibold gap-x-5">
      <li><a href="#" class="p-2 hover:bg-slate-500">Themes</a></li>
      <li><a href="#" class="p-2 hover:bg-slate-500">Illustration</a></li>
      <li><a href="#" class="p-2 hover:bg-slate-500">Vectors</a></li>
      <li><a href="#" class="p-2 hover:bg-slate-500">Icons</a></li>
      <li><a href="#" class="p-2 hover:bg-slate-500">NFT</a></li>
    </ul>
  </nav>
  <div class="flex">
    <svg class="flex mr-4 lg:hidden" width="24" height="24"><path d="M5 6h14M5 12h14M5 18h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
    <svg fill="#ffffff" class="flex lg:hidden" height="24" width="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 11a5.698 5.698 0 0 0 3.9-1.537l1.76.66A3.608 3.608 0 0 1 16 13.5V15a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-1.5c0-1.504.933-2.85 2.34-3.378l1.76-.66A5.698 5.698 0 0 0 8 11zM7.804 0h.392a3.5 3.5 0 0 1 3.488 3.79l-.164 1.971a3.532 3.532 0 0 1-7.04 0l-.164-1.97A3.5 3.5 0 0 1 7.804 0z" fill-rule="evenodd"></path></svg>
    <a href="#" class="hidden text-slate-200 hover:underline lg:flex">Sign up</a>
  </div>
</div>

<div class="flex justify-between items-center py-4 text-[0.9rem] dark:text-white font-medium">
  <svg class="flex ml-4 lg:hidden" width="24" height="24"><path d="M5 6h14M5 12h14M5 18h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
  <nav class="hidden lg:flex">
    <ul class="flex gap-x-2">
      <li><a href="#" class="rounded-3xl px-4 py-[0.4rem] hover:bg-slate-200 dark:hover:text-slate-700">Home</a></li>
      <li><a href="#" class="rounded-3xl px-4 py-[0.4rem] hover:bg-slate-200 dark:hover:text-slate-700">Payments</a></li>
      <li><span class="rounded-3xl bg-blue-400 px-4 py-[0.4rem] text-white">Balances</span></li>
      <li><a href="#" class="rounded-3xl px-4 py-[0.4rem] hover:bg-slate-200 dark:hover:text-slate-700">Customers</a></li>
      <li><a href="#" class="rounded-3xl px-4 py-[0.4rem] hover:bg-slate-200 dark:hover:text-slate-700">Products</a></li>
    </ul>
  </nav>
  <div class="flex items-center pr-4 text-gray-900"> 
    <a href="#" class="rounded-3xl px-4 py-[0.4rem] hover:bg-slate-200 dark:hover:text-slate-700 dark:text-gray-100">Settings</a>
    <div class="flex items-center">
      <p class="mx-2 dark:text-gray-300">Developer</p>
      <label for="default-toggle" class="relative inline-flex cursor-pointer">
        <input type="checkbox" value="" id="default-toggle" class="sr-only peer" />
        <div class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-green-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-green-800"></div>
      </label>
    </div>
  </div>
</div>

<header class="shadow bg-slate-50 dark:bg-gray-700">
  <div class="flex items-center px-4 py-4 justify-justify">
    <nav class="dark:text-white">
      <div class="inline lg:flex">
        <a href="#" class="flex p-2 px-4 font-light rounded hover:bg-blue-500 hover:text-white"
          >New
          <svg class="w-4 ml-3" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
          </svg>
        </a>

        <a href="#" class="flex block p-2 px-4 font-light rounded hover:bg-blue-500 hover:text-white"
          >Clothing
          <svg class="w-4 ml-3" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
          </svg>
        </a>
        <a href="#" class="flex block p-2 px-4 font-light rounded hover:bg-blue-500 hover:text-white"
          >Sportswear
          <svg class="w-4 ml-3" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
          </svg>
        </a>
        <a href="#" class="flex block p-2 px-4 font-light rounded hover:bg-blue-500 hover:text-white"
          >Trending
          <svg class="w-4 ml-3" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
          </svg>
        </a>
        <a href="#" class="flex block p-2 px-4 font-light rounded hover:bg-blue-500 hover:text-white"
          >Brands
          <svg class="w-4 ml-3" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
          </svg>
        </a>
        <a href="#" class="flex block p-2 px-4 font-medium text-blue-400 rounded hover:bg-blue-500 hover:text-white"
          >SALE
          <svg class="w-4 ml-3" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
          </svg>
        </a>
      </div>
    </nav>
  </div>
</header>