safing-web/_includes/nav.html

<nav class="flex flex-wrap items-center bg-black px-10 py-6 fixed w-full z-50 lg:absolute">
  <div class="flex-1 flex justify-between items-center">
    <a href="index.html" class="flex items-center hover:opacity-50 transition duration-150 ease-in-out opacity-100">
      <svg class="spin h-6 w-auto mr-4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
        <g data-name="Main" fill-rule="evenodd">
          <path fill="#fff" d="M176.11 36.73l-5-8.61a41.53 41.53 0 00-14.73 57.22l8.55-5.12a31.58 31.58 0 0111.19-43.49z" transform="translate(-127.99 .01)" style="isolation:isolate" fill="url(#a)" opacity=".8" />
          <path fill="#fff" d="M222.36 72.63a31.55 31.55 0 01-45 19.35l-4.62 8.84a41.54 41.54 0 0059.17-25.46z" transform="translate(-127.99 .01)" style="isolation:isolate" fill="url(#b)" opacity=".8" />
          <path fill="#fff" d="M197 83a19.66 19.66 0 01-19.25-32.57l-4.5-4.27A25.87 25.87 0 00198.59 89z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".6" fill="url(#c)" />
          <path fill="#fff" d="M192 112.64A48.64 48.64 0 11240.64 64 48.64 48.64 0 01192 112.64zM256 64a64 64 0 10-64 64 64 64 0 0064-64z" transform="translate(-127.99 .1)" fill="url(#d)" />
        </g>
      </svg>
      <span class="text-white">Safing<span class="opacity-50">.io</span></span>
    </a>
  </div>
  <label for="menu-toggle" class="pointer-cursor lg:hidden block">
    <svg class="h-6 w-6 fill-current text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
      <path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      <path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </label>
  <input class="hidden" type="checkbox" id="menu-toggle" />
  <div class="hidden w-full text-center lg:flex lg:items-center lg:w-auto " id="menu">
    <nav>
      <ul class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0">
        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
          <a href="/spn.html" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
            SPN
          </a>
        </li>
        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
          <a href="/portmaster.html" class="ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
            Portmaster
          </a>
        </li>
        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
          <a href="/spn.html#Pricing" class="ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
            Pricing
          </a>
        </li>
        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
          <a href="/aboutus.html" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
            About Us
          </a>
        </li>
        <li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
          <a href="/support.html" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
            Support
          </a>
        </li>
        <li>
          <div class="block p-5 lg:flex lg:p-0 items-center">
            <span class="hidden sm:block ml-3 rounded-md">
              <button type="button" class="hidden lg:block px-4 py-2 border border-black text-lg lg:text-xs leading-5 font-semibold rounded-md text-white opacity-50 bg-black hover:opacity-100 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
                Sign In
              </button>
            </span>
            <span class="sm:ml-3 rounded-md">
              <button type="button" style="background-color: #6188ff;" class="w-full transform hover:scale-105 lg:inline-flex px-10 py-2 border border-transparent text-lg lg:text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
                Sign Up
              </button>
            </span>
            <span class="hidden sm:block ml-3 rounded-md">
              <button type="button" class="mr-auto ml-auto block lg:hidden px-4 py-2 border border-black text-lg lg:text-xs leading-5 font-semibold rounded-md text-white opacity-50 bg-black hover:opacity-100 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
                Sign In
              </button>
            </span>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</nav>