Justified

No notes defined.

  • Handle: @tw-nav-justified
  • Preview:
  • Filesystem Path: components/10-other-examples/tailwind-examples/navigation/06-justified.hbs
<ul class="flex justify-between p-3">
    <li class="mr-3">
        <a class="inline-block border border-blue-500 rounded py-2 px-4 bg-blue-500 hover:bg-blue-700 text-white" href="#">Active Pill</a>
    </li>
    <li class="mr-3">
        <a class="inline-block border border-white rounded hover:border-gray-200 text-blue-500 hover:bg-gray-200 py-2 px-4" href="#">Pill</a>
    </li>
    <li class="mr-3">
        <a class="inline-block py-2 px-4 text-gray-400 cursor-not-allowed" href="#">Disabled Pill</a>
    </li>
</ul>
<ul class="flex justify-between p-3">
  <li class="mr-3">
    <a class="inline-block border border-blue-500 rounded py-2 px-4 bg-blue-500 hover:bg-blue-700 text-white" href="#">Active Pill</a>
  </li>
  <li class="mr-3">
    <a class="inline-block border border-white rounded hover:border-gray-200 text-blue-500 hover:bg-gray-200 py-2 px-4" href="#">Pill</a>
  </li>
  <li class="mr-3">
    <a class="inline-block py-2 px-4 text-gray-400 cursor-not-allowed" href="#">Disabled Pill</a>
  </li>
</ul>
/* No context defined. */