Navs & Tabs

<nav class="flex space-x-6">
  <a class="inline-flex items-center gap-x-2 text-base whitespace-nowrap text-indigo-600 hover:text-indigo-70 focus:outline-none focus:text-indigo-700" href="#">Link</a>
  <a
     class="inline-flex items-center gap-x-2 text-base font-semibold whitespace-nowrap text-indigo-600 hover:text-indigo-70 focus:outline-none focus:text-indigo-700"
     href="#"
     aria-current="page"
     >
  Active
  </a>
  <a class="inline-flex items-center gap-x-2 text-base whitespace-nowrap text-indigo-600 hover:text-indigo-70 focus:outline-none focus:text-indigo-700" href="#">Link</a>
  <a
     class="inline-flex items-center gap-x-2 text-base whitespace-nowrap text-indigo-600 hover:text-indigo-70 focus:outline-none focus:text-indigo-700 opacity-50 pointer-events-none"
     href="#"
     >
  Disabled
  </a>
</nav>

<nav class="flex border-b border-gray-300">
<a
	 class="px-4 py-3 -mb-px border-gray-300 border rounded-t-md inline-flex items-center gap-x-2 text-base font-semibold whitespace-nowrap text-indigo-600 hover:text-indigo-70 focus:outline-none focus:text-indigo-700"
	 href="#"
	 aria-current="page"
	 >
Active
</a>
<a
	 class="px-4 py-3 hover:-mb-px hover:border-gray-300 hover:border hover:rounded-t-md inline-flex items-center gap-x-2 text-base whitespace-nowrap text-indigo-600 hover:text-indigo-70 focus:outline-none focus:text-indigo-700"
	 href="#"
	 >
Link
</a>
<a
	 class="px-4 py-3 hover:-mb-px hover:border-gray-300 hover:border hover:rounded-t-md inline-flex items-center gap-x-2 text-base whitespace-nowrap text-indigo-600 hover:text-indigo-70 focus:outline-none focus:text-indigo-700"
	 href="#"
	 >
Link
</a>
<a
	 class="px-4 py-3 hover:-mb-px hover:border-gray-300 hover:border hover:rounded-t-md inline-flex items-center gap-x-2 text-base whitespace-nowrap text-gray-600 hover:text-indigo-70 focus:outline-none focus:text-indigo-700 opacity-50 pointer-events-none"
	 href="#"
	 >
Disabled
</a>
</nav>

<ul class="nav nav-tabs mb-3 border-b border-gray-300" id="pills-tab2" role="tablist">
	<li class="nav-item" role="presentation">
		<a
			class="nav-link px-5 py-3 rounded-t-md border border-white hover:border-gray-300 active"
			id="pills-active-example1-tab"
			data-bs-toggle="pill"
			href="#pills-active-example1"
			type="button"
			role="tab"
			aria-controls="pills-active-example1"
			aria-selected="true"
		>
			Active
		</a>
	</li>
	<li class="nav-item" role="presentation">
		<a
			class="nav-link px-5 py-3 rounded-t-md border border-white hover:border-gray-300"
			id="pills-link1-example1-tab"
			data-bs-toggle="pill"
			href="#pills-link1-example1"
			type="button"
			role="tab"
			aria-controls="pills-link1-example1"
			aria-selected="false"
		>
			Link
		</a>
	</li>
	<li class="nav-item" role="presentation">
		<a
			class="nav-link px-5 py-3 rounded-t-md border border-white hover:border-gray-300"
			id="pills-link2-example1-tab"
			data-bs-toggle="pill"
			href="#pills-link2-example1"
			type="button"
			role="tab"
			aria-controls="pills-link2-example1"
			aria-selected="false"
		>
			Link
		</a>
	</li>
</ul>
<div class="tab-content py-6" id="pills-tabContent">
	<div class="tab-pane fade show active" id="pills-active-example1" role="tabpanel" aria-labelledby="pills-active-example1" tabindex="0">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit ligula, cursus at orci at, condimentum dignissim dolor. Morbi elit lacus, posuere id urna et, elementum
		malesuada erat.
	</div>
	<div class="tab-pane fade" id="pills-link1-example1" role="tabpanel" aria-labelledby="pills-link1-example1" tabindex="0">
		Duis metus nisl, varius non mauris sed, commodo sodales arcu. Quisque in tellus semper, tincidunt tortor ut, varius purus. Aliquam erat volutpat.
	</div>
	<div class="tab-pane fade" id="pills-link2-example1" role="tabpanel" aria-labelledby="pills-link2-example1" tabindex="0">
		Mauris sed interdum elit, in sagittis erat. Aliquam sed venenatis nibh. Sed malesuada ornare leo, et consectetur arcu placerat eget. Praesent quam massa, vulputate sed
		ligula quis, aliquet rutrum enim.
	</div>
</div>