Custom Tabs - tailwind.css

[template247]

<div class="flex flex-col gap-6 justify-center items-center w-full h-screen bg-yellow-300">
<div class="logo flex gap-2 items-center">
<img class="tailwind-logo w-8" src="https://tailwindcss.com/_next/stati....3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg">
<span class="text-cyan-500 text-2xl ">tailwindcss</span>
</div>
<div class="w-1/2 mx-auto mt-4 text-cyan-500">

<ul id="tabs" class="inline-flex p-2 w-full border-b [&>*]:border-cyan-600 border-cyan-600">
<li class="p-2 cursor-pointer rounded-t-md border-t border-l border-r -mb-2 bg-white active" tab-to="first">
Tab 1
</li>
<li class="p-2 cursor-pointer" tab-to="second">
Tab 2
</li>
<li class="p-2 cursor-pointer" tab-to="third">
Tab 3
</li>
</ul>

<div id="tab-contents">
<div class="p-4 active" tab-id="first">
First tab
</div>
<div class="p-4 hidden" tab-id="second">
Second tab
</div>
<div class="p-4 hidden" tab-id="third">
Third tab
</div>
</div>

</div>
</div>