by Nemrut Creative Studio on 31 Jul 2020
The following example will show you how to create the basic tabs using the Alpine JS and tailwindcss.
<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>
Panel 1 content
Panel 2 content
Panel 3 content
That's it. You can style it with your own Tailwindcss configuration.
Copyright ©2021 Nemrut Creative Studio