<div x-data="tabs" data-selected-tab="tab">
<div
x-bind="tabBar"
class="grid grid-flow-col auto-cols-auto items-center justify-start border-b border-gray-300 pl-2 dark:border-dark-600"
>
<button
data-tab="tab"
x-bind="label"
class="-mb-px -ml-px block text-ellipsis whitespace-nowrap rounded-t-md border border-gray-300 p-2 px-4 dark:border-dark-600"
class-default="bg-secondary-100 hover:bg-secondary-50 dark:bg-dark-800 dark:text-text-300/80 dark:hover:bg-dark-700"
class-selected="border-b-transparent bg-white shadow-none hover:bg-white dark:border-b-transparent dark:bg-dark-900 dark:text-text-300 dark:hover:bg-dark-900"
>
tab
</button>
<button
data-tab="tab 2"
x-bind="label"
class="-mb-px -ml-px block text-ellipsis whitespace-nowrap rounded-t-md border border-gray-300 p-2 px-4 dark:border-dark-600"
class-default="bg-secondary-100 hover:bg-secondary-50 dark:bg-dark-800 dark:text-text-300/80 dark:hover:bg-dark-700"
class-selected="border-b-transparent bg-white shadow-none hover:bg-white dark:border-b-transparent dark:bg-dark-900 dark:text-text-300 dark:hover:bg-dark-900"
>
tab 2
</button>
<button
data-tab="tab 3"
x-bind="label"
class="-mb-px -ml-px block text-ellipsis whitespace-nowrap rounded-t-md border border-gray-300 p-2 px-4 dark:border-dark-600"
class-default="bg-secondary-100 hover:bg-secondary-50 dark:bg-dark-800 dark:text-text-300/80 dark:hover:bg-dark-700"
class-selected="border-b-transparent bg-white shadow-none hover:bg-white dark:border-b-transparent dark:bg-dark-900 dark:text-text-300 dark:hover:bg-dark-900"
>
tab 3
</button>
</div>
<div class="relative m-4">
<div
data-tab="tab"
x-bind="content"
x-cloak
x-alt-transition='{
"enter": ["opacity-0", "transition ease-out duration-100 delay-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100 absolute top-0", "opacity-0"]
}'
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book.
</div>
<div
data-tab="tab 2"
x-bind="content"
x-cloak
x-alt-transition='{
"enter": ["opacity-0", "transition ease-out duration-100 delay-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100 absolute top-0", "opacity-0"]
}'
>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at
its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
opposed to using 'Content here, content here', making it look like readable English.
</div>
<div
data-tab="tab 3"
x-bind="content"
x-cloak
x-alt-transition='{
"enter": ["opacity-0", "transition ease-out duration-100 delay-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100 absolute top-0", "opacity-0"]
}'
>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
literature from 45 BC, making it over 2000 years old.
</div>
</div>
</div>
<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/components/tabs/dist/cdn.min.js"></script>
The data for the component is provided by the tabs function in the x-data directive and the props in the data-* attributes.
data-selected-tab
empty string
String
The name of the selected tab.
data-transition
empty string
String
The transition that will be applied to each tab.
Tabs can be aligned by replacing justify-start class on the tabBar element with a different justify-* class. Using justify-stretch will make the tabs take up all available space on the tab bar.
<div x-data="tabs" data-selected-tab="tab">
<div
x-bind="tabBar"
class="grid grid-flow-col auto-cols-auto items-center justify-stretch border-b border-gray-300 pl-2 dark:border-dark-600 pr-2"
>
<button
data-tab="tab"
x-bind="label"
class="-mb-px -ml-px block text-ellipsis whitespace-nowrap rounded-t-md border border-gray-300 p-2 px-4 dark:border-dark-600"
class-default="bg-secondary-100 hover:bg-secondary-50 dark:bg-dark-800 dark:text-text-300/80 dark:hover:bg-dark-700"
class-selected="border-b-transparent bg-white shadow-none hover:bg-white dark:border-b-transparent dark:bg-dark-900 dark:text-text-300 dark:hover:bg-dark-900"
>
tab
</button>
<button
data-tab="tab 2"
x-bind="label"
class="-mb-px -ml-px block text-ellipsis whitespace-nowrap rounded-t-md border border-gray-300 p-2 px-4 dark:border-dark-600"
class-default="bg-secondary-100 hover:bg-secondary-50 dark:bg-dark-800 dark:text-text-300/80 dark:hover:bg-dark-700"
class-selected="border-b-transparent bg-white shadow-none hover:bg-white dark:border-b-transparent dark:bg-dark-900 dark:text-text-300 dark:hover:bg-dark-900"
>
tab 2
</button>
<button
data-tab="tab 3"
x-bind="label"
class="-mb-px -ml-px block text-ellipsis whitespace-nowrap rounded-t-md border border-gray-300 p-2 px-4 dark:border-dark-600"
class-default="bg-secondary-100 hover:bg-secondary-50 dark:bg-dark-800 dark:text-text-300/80 dark:hover:bg-dark-700"
class-selected="border-b-transparent bg-white shadow-none hover:bg-white dark:border-b-transparent dark:bg-dark-900 dark:text-text-300 dark:hover:bg-dark-900"
>
tab 3
</button>
</div>
<div class="relative m-4">
<div
data-tab="tab"
x-bind="content"
x-cloak
x-alt-transition='{
"enter": ["opacity-0", "transition ease-out duration-100 delay-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100 absolute top-0", "opacity-0"]
}'
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book.
</div>
<div
data-tab="tab 2"
x-bind="content"
x-cloak
x-alt-transition='{
"enter": ["opacity-0", "transition ease-out duration-100 delay-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100 absolute top-0", "opacity-0"]
}'
>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at
its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
opposed to using 'Content here, content here', making it look like readable English.
</div>
<div
data-tab="tab 3"
x-bind="content"
x-cloak
x-alt-transition='{
"enter": ["opacity-0", "transition ease-out duration-100 delay-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100 absolute top-0", "opacity-0"]
}'
>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
literature from 45 BC, making it over 2000 years old.
</div>
</div>
</div>
<div x-data="tabs" data-selected-tab="tab">
<div
x-bind="tabBar"
class="grid grid-flow-col auto-cols-auto items-center justify-start pl-2"
>
<button
data-tab="tab"
x-bind="label"
class="-mb-px border-b-2 p-3 px-4 font-semibold uppercase transition-colors duration-200"
class-default="border-transparent hover:bg-secondary-50 dark:hover:bg-dark-700"
class-selected="border-b-2 border-primary-500 shadow-none"
>
tab
</button>
<button
data-tab="tab 2"
x-bind="label"
class="-mb-px border-b-2 p-3 px-4 font-semibold uppercase transition-colors duration-200"
class-default="border-transparent hover:bg-secondary-50 dark:hover:bg-dark-700"
class-selected="border-b-2 border-primary-500 shadow-none"
>
tab 2
</button>
<button
data-tab="tab 3"
x-bind="label"
class="-mb-px border-b-2 p-3 px-4 font-semibold uppercase transition-colors duration-200"
class-default="border-transparent hover:bg-secondary-50 dark:hover:bg-dark-700"
class-selected="border-b-2 border-primary-500 shadow-none"
>
tab 3
</button>
</div>
<div class="relative m-4">
<div
data-tab="tab"
x-bind="content"
x-cloak
x-alt-transition='{
"enter": ["opacity-0", "transition ease-out duration-100 delay-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100 absolute top-0", "opacity-0"]
}'
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book.
</div>
<div
data-tab="tab 2"
x-bind="content"
x-cloak
x-alt-transition='{
"enter": ["opacity-0", "transition ease-out duration-100 delay-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100 absolute top-0", "opacity-0"]
}'
>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at
its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
opposed to using 'Content here, content here', making it look like readable English.
</div>
<div
data-tab="tab 3"
x-bind="content"
x-cloak
x-alt-transition='{
"enter": ["opacity-0", "transition ease-out duration-100 delay-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100 absolute top-0", "opacity-0"]
}'
>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
literature from 45 BC, making it over 2000 years old.
</div>
</div>
</div>
To apply the same transition to every tab use the data-transition prop.
<div
x-data="tabs"
data-selected-tab="tab"
data-transition='{
"enter": ["opacity-0 translate-x-10", "transition ease-out duration-100 delay-100", "opacity-100"],
"leave": ["opacity-100", "transition ease-in duration-100 absolute top-0", "opacity-0"]
}'
>
<div
x-bind="tabBar"
class="grid auto-cols-auto grid-flow-col items-center justify-start border-b border-gray-300 pl-2 dark:border-dark-600"
>
<button
data-tab="tab"
x-bind="label"
class="-mb-px -ml-px block rounded-t-md border border-gray-300 p-2 px-4 text-ellipsis whitespace-nowrap dark:border-dark-600"
class-default="bg-secondary-100 hover:bg-secondary-50 dark:bg-dark-800 dark:text-text-300/80 dark:hover:bg-dark-700"
class-selected="border-b-transparent bg-white shadow-none hover:bg-white dark:border-b-transparent dark:bg-dark-900 dark:text-text-300 dark:hover:bg-dark-900"
>
tab
</button>
<button
data-tab="tab 2"
x-bind="label"
class="-mb-px -ml-px block rounded-t-md border border-gray-300 p-2 px-4 text-ellipsis whitespace-nowrap dark:border-dark-600"
class-default="bg-secondary-100 hover:bg-secondary-50 dark:bg-dark-800 dark:text-text-300/80 dark:hover:bg-dark-700"
class-selected="border-b-transparent bg-white shadow-none hover:bg-white dark:border-b-transparent dark:bg-dark-900 dark:text-text-300 dark:hover:bg-dark-900"
>
tab 2
</button>
<button
data-tab="tab 3"
x-bind="label"
class="-mb-px -ml-px block rounded-t-md border border-gray-300 p-2 px-4 text-ellipsis whitespace-nowrap dark:border-dark-600"
class-default="bg-secondary-100 hover:bg-secondary-50 dark:bg-dark-800 dark:text-text-300/80 dark:hover:bg-dark-700"
class-selected="border-b-transparent bg-white shadow-none hover:bg-white dark:border-b-transparent dark:bg-dark-900 dark:text-text-300 dark:hover:bg-dark-900"
>
tab 3
</button>
</div>
<div class="relative m-4">
<div data-tab="tab" x-bind="content" x-cloak>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.
</div>
<div data-tab="tab 2" x-bind="content" x-cloak>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of using
Lorem Ipsum is that it has a more-or-less normal distribution of letters,
as opposed to using 'Content here, content here', making it look like
readable English.
</div>
<div data-tab="tab 3" x-bind="content" x-cloak>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has
roots in a piece of classical Latin literature from 45 BC, making it over
2000 years old.
</div>
</div>
</div>