<ul class="flex">
<li class="mr-6">
<a class="text-primary-500 hover:text-primary-600" href="#">Active</a>
</li>
<li class="mr-6">
<a class="text-primary-500 hover:text-primary-600" href="#">Link</a>
</li>
<li class="mr-6">
<a class="text-primary-500 hover:text-primary-600" href="#">Link</a>
</li>
<li class="mr-6">
<a class="text-gray-400 cursor-not-allowed" href="#">Disabled</a>
</li>
</ul>
<ul class="flex border-b dark:border-b-slate-700">
<li class="-mb-px mr-1">
<a class="bg-white dark:bg-slate-600/20 inline-block border-b border-primary-500 py-2 px-4 text-primary-600 font-medium" href="#">Active</a>
</li>
<li class="mr-1">
<a class="bg-white dark:bg-slate-600/20 inline-block py-2 px-4 text-slate-500 dark:text-slate-400 hover:text-primary-600 font-medium" href="#">Tab</a>
</li>
<li class="mr-1">
<a class="bg-white dark:bg-slate-600/20 inline-block py-2 px-4 text-slate-500 dark:text-slate-400 hover:text-primary-600 font-medium" href="#">Tab</a>
</li>
<li class="mr-1">
<a class="bg-white dark:bg-slate-600/20 inline-block py-2 px-4 text-slate-500 dark:text-slate-400 font-medium" href="#">Tab</a>
</li>
</ul>
<ul class="flex">
<li class="mr-3">
<a class="inline-block border border-primary-500 rounded py-1 px-3 bg-primary-500 text-white" href="#">Active Pill</a>
</li>
<li class="mr-3">
<a class="inline-block border border-white dark:border-transparent rounded hover:border-gray-200 text-primary-500 hover:bg-gray-200 py-1 px-3" href="#">Pill</a>
</li>
<li class="mr-3">
<a class="inline-block py-1 px-3 text-gray-400 cursor-not-allowed" href="#">Disabled Pill</a>
</li>
</ul>
<ul class="flex">
<li class="flex-1 mr-2">
<a class="text-center block border border-primary-500 rounded py-2 px-4 bg-primary-500 hover:bg-primary-600 text-white" href="#">Active Item</a>
</li>
<li class="flex-1 mr-2">
<a class="text-center block border border-white dark:border-transparent rounded hover:border-gray-200 text-primary-500 hover:bg-gray-200 py-2 px-4" href="#">Nav Item</a>
</li>
<li class="text-center flex-1">
<a class="block py-2 px-4 text-gray-400 cursor-not-allowed" href="#">Disabled Item</a>
</li>
</ul>
<ul class="flex justify-between">
<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 dark:border-transparent 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>
@@include("partials/footer/footer.html")