<div class="p-8 space-y-8">
  <div class="bg-indigo-800 p-8 rounded-lg">
    <ul class="text-white">
      <li class="px-4 py-2 hover:bg-indigo-900 rounded-lg">Pilot</li>
      <li class="px-4 py-2 bg-indigo-700 hover:bg-indigo-900 rounded-lg">
        Titan
      </li>
      <li class="px-4 py-2 hover:bg-indigo-900 rounded-lg">Timelines</li>
    </ul>

    <p class="text-pink-500 font-bold my-3">Training:</p>
    <ul class="pl-4 border-l-2 border-indigo-700 text-white">
      <li class="px-4 py-2 hover:bg-indigo-900 rounded-lg">Basic maneuver</li>
      <li class="px-4 py-2 hover:bg-indigo-900 rounded-lg">Gaunlet</li>
      <li class="px-4 py-2 hover:bg-indigo-900 rounded-lg">Neural Link 101</li>
    </ul>
  </div>

  <!-- Inverted -->
  <div class="p-8 rounded-lg">
    <ul class="text-indigo-800">
      <li class="px-4 py-2 hover:bg-indigo-50 rounded-lg">Pilot</li>
      <li class="px-4 py-2 bg-indigo-800 text-white rounded-lg">Titan</li>
      <li class="px-4 py-2 hover:bg-indigo-50 rounded-lg">Timelines</li>
    </ul>

    <p class="text-indigo-600 font-bold my-3">Training:</p>
    <ul class="pl-4 border-l-2 border-indigo-100 text-indigo-900">
      <li class="px-4 py-2 hover:bg-indigo-900  hover:text-white rounded-lg">Basic maneuver</li>
      <li class="px-4 py-2 hover:bg-indigo-900  hover:text-white rounded-lg">Gaunlet</li>
      <li class="px-4 py-2 hover:bg-indigo-900  hover:text-white rounded-lg">Neural Link 101</li>
    </ul>
  </div>
</div>