The following example will show you how to create the basic tabs using the Alpine JS and tailwindcss.

Write some markup

<div x-data="{active: 0}">
    <div class="flex border border-black overflow-hidden -mb-px">
        <button class="px-4 py-2 w-full" x-on:click.prevent="active = 0" x-bind:class="{'bg-black text-white': active === 0}">Tab 1</button>
        <button class="px-4 py-2 w-full" x-on:click.prevent="active = 1" x-bind:class="{'bg-black text-white': active === 1}">Tab 2</button>
        <button class="px-4 py-2 w-full" x-on:click.prevent="active = 2" x-bind:class="{'bg-black text-white': active === 2}">Tab 3</button>
    </div>
    <div class="bg-black bg-opacity-10 border border-black -mt-px">
        <div class="p-4 space-y-2" x-show="active === 0">
            <h2 class="text-2xl">Panel 1 Using x-show</h2>
            <p>Panel 1 content</p>
        </div>
        <div class="p-4 space-y-2" x-show.transition.in="active === 1">
            <h2 class="text-2xl">Panel 2 Using x-show.transition</h2>
            <p>Panel 2 content</p>
        </div>
        <div class="p-4 space-y-2" x-show="active === 2"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform scale-90"
            x-transition:enter-end="opacity-100 transform scale-100">
            <h2 class="text-2xl">Panel 3 Using x-transition</h2>
            <p>Panel 3 content</p>
        </div>
    </div>
</div>

Result

That's it. You can style it with your own Tailwindcss configuration.