<nav class="mt-4 mx-auto text-glacier-700 text-base sm:text-lg">
<ul class="flex justify-center space-x-4">
<li>
<a href="#" class="underline decoration-glacier-bluegreen">
About
</a>
</li>
<li>
<a href="#" class="hover:underline decoration-glacier-bluegreen">
Blog
</a>
</li>
<li>
<a href="#" class="hover:underline decoration-glacier-bluegreen">
Contact
</a>
</li>
</ul>
</nav><nav class="mt-4 mx-auto text-glacier-700 dark:text-glacier-200 text-base sm:text-lg">
<ul class="flex justify-center space-x-4">
<li>
<a href="#" class="underline decoration-glacier-bluegreen">
About
</a>
</li>
<li>
<a href="#" class="hover:underline decoration-glacier-bluegreen">
Blog
</a>
</li>
<li>
<a href="#" class="hover:underline decoration-glacier-bluegreen">
Contact
</a>
</li>
</ul>
</nav><nav class="mt-4 mx-auto text-glacier-200 text-base sm:text-lg">
<ul class="flex justify-center space-x-4">
<li>
<a href="#" class="underline decoration-glacier-bluegreen">
About
</a>
</li>
<li>
<a href="#" class="hover:underline decoration-glacier-bluegreen">
Blog
</a>
</li>
<li>
<a href="#" class="hover:underline decoration-glacier-bluegreen">
Contact
</a>
</li>
</ul>
</nav><nav class="z-40 bg-glacier-100 dark:bg-glacier-900">
<div class="mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div class="flex flex-1 items-stretch justify-start">
<div class="flex shrink-0 items-center">
<a href="#" class="">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-auto text-glacier-600 dark:text-glacier-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
</svg>
</a>
</div>
</div>
<div class="inset-y-0 right-0 flex items-center pr-2">
<div class="flex space-x-4">
<a href="#" class="rounded-md bg-glacier-100 px-3 py-2 text-base font-medium text-glacier-600 transition duration-300 ease-in hover:bg-glacier-200 dark:bg-glacier-900 dark:text-glacier-400 dark:hover:bg-glacier-800">About</a>
<a href="#" class="rounded-md bg-glacier-200 px-3 py-2 text-base font-medium text-glacier-600 dark:bg-glacier-800 dark:text-glacier-400">Docs</a>
<a href="#" class="rounded-md bg-glacier-100 px-3 py-2 text-base font-medium text-glacier-600 transition duration-300 ease-in hover:bg-glacier-200 dark:bg-glacier-900 dark:text-glacier-400 dark:hover:bg-glacier-800">Blog</a>
<button type="button" name="button" onclick="toggleDarkMode();" class="rounded-md px-3 py-1 transition duration-300 hover:bg-glacier-200 dark:hover:bg-glacier-800">
<svg xmlns="http://www.w3.org/2000/svg" class="block h-5 w-5 dark:hidden" viewBox="0 0 20 20" fill="currentColor">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="hidden h-5 w-5 fill-glacier-200 duration-300 dark:block" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
</nav><nav class="z-40 bg-glacier-100">
<div class="mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div class="flex flex-1 items-stretch justify-start">
<div class="flex shrink-0 items-center">
<a href="#" class="">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-auto text-glacier-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
</svg>
</a>
</div>
</div>
<div class="inset-y-0 right-0 flex items-center pr-2">
<div class="flex space-x-4">
<a href="#" class="rounded-md bg-glacier-100 px-3 py-2 text-base font-medium text-glacier-600 transition duration-300 ease-in hover:bg-glacier-200">About</a>
<a href="#" class="rounded-md bg-glacier-200 px-3 py-2 text-base font-medium text-glacier-600">Docs</a>
<a href="#" class="rounded-md bg-glacier-100 px-3 py-2 text-base font-medium text-glacier-600 transition duration-300 ease-in hover:bg-glacier-200">Blog</a>
</div>
</div>
</div>
</div>
</nav><nav class="z-40 bg-glacier-900">
<div class="mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div class="flex flex-1 items-stretch justify-start">
<div class="flex shrink-0 items-center">
<a href="#" class="">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-auto text-glacier-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
</svg>
</a>
</div>
</div>
<div class="inset-y-0 right-0 flex items-center pr-2">
<div class="flex space-x-4">
<a href="#" class="rounded-md bg-glacier-900 px-3 py-2 text-base font-medium text-glacier-400 transition duration-300 ease-in hover:bg-glacier-800">About</a>
<a href="#" class="rounded-md bg-glacier-800 px-3 py-2 text-base font-medium text-glacier-400">Docs</a>
<a href="#" class="rounded-md bg-glacier-900 px-3 py-2 text-base font-medium text-glacier-400 transition duration-300 ease-in hover:bg-glacier-800">Blog</a>
</div>
</div>
</div>
</div>
</nav>