<!-- Primary -->
<button
  class="text-indigo-500 py-2 px-4 uppercase font-medium "
>
  Primary
</button>

<!-- Info -->
<button
  class="text-blue-500 py-2 px-4 uppercase font-medium "
>
  Info
</button>


<!-- Success -->
<button
  class="text-green-500 py-2 px-4 uppercase font-medium "
>
  Success
</button>


<!-- Danger -->
<button
  class="text-red-500 py-2 px-4 uppercase font-medium "
>
  Danger
</button>


<!-- Warning -->
<button
  class="text-yellow-500 py-2 px-4 uppercase font-medium "
>
  Warning
</button>


<!-- Default -->
<button
  class="text-gray-800-500 py-2 px-4 uppercase font-medium "
>
  Default
</button>


<!-- Secondary -->
<button
  class="text-gray-500 py-2 px-4 uppercase font-medium "
>
  Secondary
</button>
                    
                

                    
                         <!-- Primary -->
<button
  class="text-indigo-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-indigo-500 hover:bg-indigo-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Primary
</button>

<!-- Info -->
<button
  class="text-blue-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-blue-500 hover:bg-blue-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Info
</button>


<!-- Success -->
<button
  class="text-green-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-green-500 hover:bg-green-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Success
</button>


<!-- Danger -->
<button
  class="text-red-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-red-500 hover:bg-red-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Danger
</button>


<!-- Warning -->
<button
  class="text-yellow-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-yellow-500 hover:bg-yellow-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Warning
</button>


<!-- Default -->
<button
  class="text-gray-600 hover:text-white py-2 px-4 uppercase rounded bg-white border border-gray-600 hover:bg-gray-700 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Default
</button>


<!-- Secondary -->
<button
  class="text-gray-500 hover:text-gray-700 py-2 px-4 uppercase rounded bg-white border border-gray-200 hover:bg-gray-200 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Secondary
</button>
                    
                

                    
                         <!-- Primary -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-indigo-500 hover:bg-indigo-600 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Primary
</button>

<!-- Info -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-blue-400 hover:bg-blue-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Info
</button>

<!-- Success -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-green-400 hover:bg-green-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Success
</button>

<!-- Danger -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-red-400 hover:bg-red-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Danger
</button>

<!-- Warning -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-yellow-400 hover:bg-yellow-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Warning
</button>

<!-- Default -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-gray-700 hover:bg-gray-800 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Default
</button>

<!-- Secondary -->
<button
  class="py-2 px-4 uppercase rounded bg-gray-100 hover:bg-gray-200 text-gray-700 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Secondary
</button>
                    
                

                    
                         <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>
                    
                

                    
                         <label
  for="input1"
  class="p-4 text-gray-800 relative focus-within:text-purple-800 bg-white transition-colors rounded-md block border-2 border-gray-200 focus-within:border-purple-600"
>
  <p class="mb-2 ">Name</p>
  <input
    type="text"
    id="input1"
    placeholder="Your name..."
    class="w-full bg-transparent border-transparent focus:outline-none text-gray-700"
  />
  <div class="absolute left-0 inset-y-0 flex items-center -ml-2 mt-8">
  <span class="flex h-3 w-3 relative">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-purple-500"></span>
  </div>
</span>
</label>
                    
                

                    
                         <label
  for="input1"
  class="p-4 text-gray-800 focus-within:text-purple-800 caret-red-500 bg-white transition-colors rounded-md block border-2 border-red-400 focus-within:border-red-600"
>
  <p class="mb-2 ">Name</p>
  <input
    type="text"
    id="input1"
    placeholder="Your name..."
    class="w-full bg-transparent border-transparent focus:outline-none text-gray-700"
  />
</label>