<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.2.0/dist/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.8/dist/alpine.js"
defer></script>
</head>
<body class="text-gray-800 bg-gray-200">
<div class="container mx-auto p-4 mb-4">
<h2 class="text-2xl font-bold">Tabs</h2>
<ul class="flex border-b mt-6" >
<li class="-mb-px mr-1">
<a
class="inline-block rounded-t py-2 px-4 font-semibold hover:text-blue-800
bg-white text-blue-700 border-l border-t border-r" href="#"
>Tab 1</a>
</li>
<li class="-mb-px mr-1">
<a
class="inline-block py-2 px-4 text-blue-500 hover:text-blue-800
font-semibold"
href="#"
>Tab 2</a
>
</li>
<li class="-mb-px mr-1">
<a
class="inline-block py-2 px-4 text-blue-500 hover:text-blue-800
font-semibold"
href="#" >Tab 3</a
>
</li>
</ul>
<div class="content bg-white px-4 py-4 border-l border-r border-b pt-4">
<div>
Tab1 content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt sunt, consectetur eos quod perferendis mollitia consequuntur natus,
porro molestiae qui iusto deserunt rerum tempore voluptatum itaque. Ad, nisi
esse cum quidem consequuntur ullam obcaecati.
</div>
</div>
</div>
</body>
</html>
