<div>
    <div class="grid grid-cols-3 gap-5">
      <button
        class="text-white p-4 rounded bg-indigo-500 shadow-md flex items-center justify-center"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6 mr-2"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
          />
        </svg>
        Home
      </button>
      <button
        class="p-4 rounded bg-white text-indigo-500 shadow-md flex items-center justify-center"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6 mr-2"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        Profile
      </button>
      <button
        class="p-4 rounded bg-white text-indigo-500 shadow-md flex items-center justify-center"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6 mr-2"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
          />
        </svg>
        Profile
      </button>
    </div>
    <div
      class="shadow-xl border border-gray-100 font-light p-8 rounded text-gray-500 bg-white mt-6"
    >
      Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt
      tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor,
      williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
      dreamcatcher synth.
    </div>
  </div>
                    
                

                    
                         <div>
   <div class="grid grid-cols-3 gap-5">
      <button
         class="text-white p-4 rounded bg-indigo-500 shadow-md"
         >
      Home
      </button>
      <button
         class="p-4 rounded bg-white text-indigo-500 shadow-md"
         >
      Profile
      </button>
      <button
         class="p-4 rounded bg-white text-indigo-500 shadow-md"
         >
      Messages
      </button>
   </div>
   <div class="shadow-xl border border-gray-100 font-light p-8 rounded text-gray-500 bg-white mt-6">
      Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
   </div>
</div>
                    
                

                    
                         <div class="p-8">
  <ul class="grid grid-flow-col text-center text-gray-500  p-1">
    <li>
      <a href="#page1" class="flex justify-center py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center bg-white rounded-tl-lg rounded-tr-lg border-l border-t border-r border-gray-100 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center py-4">Settings</a>
    </li>
  </ul>
  <div class="bg-white shadow border border-gray-100 p-8 text-gray-700 rounded-lg -mt-2">
    Boxed content
  </div>
</div>
                    
                

                    
                         <ul class="grid grid-flow-col text-center text-gray-500 bg-gray-100 rounded-full p-1">
    <li>
      <a href="#page1" class="flex justify-center py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center bg-white rounded-full shadow text-indigo-900 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center py-4">Settings</a>
    </li>
  </ul>
                    
                

                    
                         <ul class="grid grid-flow-col text-center text-gray-500 bg-gray-100 rounded-lg p-1">
    <li>
      <a href="#page1" class="flex justify-center py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center bg-white rounded-lg shadow text-indigo-900 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center py-4">Settings</a>
    </li>
  </ul>
                    
                

                    
                         <ul class="grid grid-flow-col text-center text-gray-500">
    <li>
      <a href="#page1" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center border-t-4 text-indigo-600 border-indigo-600 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center border-t-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Settings</a>
    </li>
  </ul>
                    
                

                    
                         <ul class="grid grid-flow-col text-center border-b border-gray-200 text-gray-500">
    <li>
      <a href="#page1" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Pilot Training</a>
    </li>
    <li>
      <a href="#page2" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Titan maintenance</a>
    </li>
    <li>
      <a href="#page3" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Loadout</a>
    </li>
    <li>
      <a href="#page4" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Server Browser</a>
    </li>
    <li>
      <a href="#page5" class="flex justify-center border-b-4 border-transparent hover:text-indigo-600 hover:border-indigo-600 py-4">Settings</a>
    </li>
  </ul>