Today we are going to create Tabs Component using Tailwind CSS and Alpine JS. We are assuiming that you have the basic knowledge of tailwindcss and alpine js.
Install AlpineJS into you project. If you did not know how to install it here is a tutorial on how to install AlpineJS into a laravel 9 :
How to Install Alpine.js in Laravel 9
Create Tabs:
<div class="flex items-center justify-center max-w-screen-sm min-h-screen mx-auto">
<div class="container mx-auto h-full flex flex-col justify-center items-stretch p-2 sm:p-8" x-data="{tab: 1}">
<div class="flex justify-start -space-x-px z-10">
<a href="!#0" @click.prevent="tab = 1" :class="{'cursor-default border-b-0 bg-white': tab === 1, 'text-gray-600 bg-gray-200 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:shadow-outline': tab !== 1}" class="block align-middle px-6 py-4 text-black text-base font-semibold leading-none uppercase rounded-tl-lg border border-gray-400 outline-none shadow-none">Tab 1</a>
<a href="!#0" @click.prevent="tab = 2" :class="{'cursor-default border-b-0 bg-white': tab === 2, 'text-gray-600 bg-gray-200 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:shadow-outline': tab !== 2}" class="block align-middle px-6 py-4 text-black text-base font-semibold leading-none uppercase border border-gray-400 outline-none shadow-none">Tab 2</a>
<a href="!#0" @click.prevent="tab = 3" :class="{'cursor-default border-b-0 bg-white': tab === 3, 'text-gray-600 bg-gray-200 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:shadow-outline': tab !== 3}" class="block align-middle px-6 py-4 text-black text-base font-semibold leading-none uppercase border border-gray-400 rounded-tr-md outline-none shadow-none">Tab 3</a>
</div>
</div>
</div>Also Read : How to install Selectize.JS in Laravel 9
Then Create a Contain for the tabs:
<div class="flex items-center justify-center max-w-screen-sm min-h-screen mx-auto">
<div class="container mx-auto h-full flex flex-col justify-center items-stretch p-2 sm:p-8" x-data="{tab: 1}">
<!-- TABS -->
<div class="flex justify-start -space-x-px z-10">
<a href="!#0" @click.prevent="tab = 1" :class="{'cursor-default border-b-0 bg-white': tab === 1, 'text-gray-600 bg-gray-200 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:shadow-outline': tab !== 1}" class="block align-middle px-6 py-4 text-black text-base font-semibold leading-none uppercase rounded-tl-lg border border-gray-400 outline-none shadow-none">Tab 1
</a>
<a href="!#0" @click.prevent="tab = 2" :class="{'cursor-default border-b-0 bg-white': tab === 2, 'text-gray-600 bg-gray-200 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:shadow-outline': tab !== 2}" class="block align-middle px-6 py-4 text-black text-base font-semibold leading-none uppercase border border-gray-400 outline-none shadow-none">Tab 2
</a>
<a href="!#0" @click.prevent="tab = 3" :class="{'cursor-default border-b-0 bg-white': tab === 3, 'text-gray-600 bg-gray-200 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:shadow-outline': tab !== 3}" class="block align-middle px-6 py-4 text-black text-base font-semibold leading-none uppercase border border-gray-400 rounded-tr-md outline-none shadow-none">Tab 3
</a>
</div>
<!-- Tabs Contains -->
<div x-show="tab === 1"
class="z-0 -mt-px px-6 py-8
border border-gray-400 rounded-md rounded-tl-none
bg-gradient-to-b from-white via-gray-100 to-gray-200">
<h1 class="text-gray-900 text-2xl font-bold leading-tighter">Tailwind CSS and Alpine JS <span class="text-gray-500 font-light leading-relaxed">∣</span> Tab 1</h1>
<p class="mt-4 text-base leading-snug">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus officia maiores ipsum illum enim repudiandae quaerat tenetur sunt dolore, voluptatem blanditiis quo doloremque commodi illo? Fugiat reiciendis aliquam omnis aperiam beatae? Officia, quas consequuntur numquam laboriosam dolorem totam est, vitae at nam iste autem inventore eveniet amet ex minima in asperiores debitis repudiandae eligendi. Sint esse dolorem est aperiam. Delectus!
</p>
</div>
<div x-show="tab === 2" class="z-0 -mt-px px-6 py-8
border border-gray-400 rounded-md rounded-tl-none
bg-gradient-to-br from-white via-white to-yellow-100">
<h1 class="text-gray-900 text-2xl font-bold leading-tighter">Bottom-right gradient <span class="text-gray-500 font-light leading-relaxed">∣</span> Tab 2</h1>
<p class="mt-4 text-base leading-snug">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus officia maiores ipsum illum enim repudiandae quaerat tenetur sunt dolore, voluptatem blanditiis quo doloremque commodi illo? Fugiat reiciendis aliquam omnis aperiam beatae? Officia, quas consequuntur numquam laboriosam dolorem totam est, vitae at nam iste autem inventore eveniet amet ex minima in asperiores debitis repudiandae eligendi. Sint esse dolorem est aperiam. Delectus!</p>
</div>
<div x-show="tab === 3" class="z-0 -mt-px px-6 py-8
border border-gray-400 rounded-md rounded-tl-none
bg-gradient-to-bl from-white via-white to-blue-100">
<h1 class="text-gray-900 text-2xl font-bold leading-tighter">Bottom-left gradient <span class="text-gray-500 font-light leading-relaxed">∣</span> Tab 3</h1>
<p class="mt-4 text-base leading-snug">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus officia maiores ipsum illum enim repudiandae quaerat tenetur sunt dolore, voluptatem blanditiis quo doloremque commodi illo? Fugiat reiciendis aliquam omnis aperiam beatae? Officia, quas consequuntur numquam laboriosam dolorem totam est, vitae at nam iste autem inventore eveniet amet ex minima in asperiores debitis repudiandae eligendi. Sint esse dolorem est aperiam. Delectus!</p>
</div>
</div>
</div>
That its! Now you can test the code!
Also Read : How to Install Bootstrap in Laravel 9?
4 thoughts on “How to Create Tabs Using Tailwind CSS and Alpine JS”