<x-tabs wire:model="selectedTab">
    <x-tab name="users-tab" label="Users" icon="o-users">
        <div>Users</div>
    </x-tab>
    <x-tab name="tricks-tab" label="Tricks" icon="o-sparkles">
        <div>Tricks</div>
    </x-tab>
    <x-tab name="musics-tab" label="Musics" icon="o-musical-note">
        <div>Musics</div>
    </x-tab>
</x-tabs>
<hr class="my-5 border-base-300">

<x-button label="Change to Musics" @click="$wire.selectedTab = 'musics-tab'" />

<x-tabs wire:model="myTab">
    <x-tab name="house-tab">
        <x-slot:label>  
            House <i>Label</i>
        </x-slot:label>

        <div>House</div>
    </x-tab>
    <x-tab name="toy-tab" label="Broken Toys" badge="1">
        <div>Toy</div>
    </x-tab>
    <x-tab name="garage-tab" label="Garage" badge="3" badge-class="!badge-primary">
        <div>Garage</div>
    </x-tab>
</x-tabs>

<x-tabs wire:model="someTab">
    <x-tab name="mary-tab" label="Mary">
        <div>Mary</div>
    </x-tab>
    <x-tab name="joe-tab" label="Joe">
        <div>Joe</div>
    </x-tab>
    <x-tab name="ana-tab" label="Ana">
        <div>Ana</div>
    </x-tab>
    <x-tab name="marina-tab" label="Marina" disabled>
        <div>Marina</div>
    </x-tab>
</x-tabs>

<x-tabs wire:model="anotherTab">
    <x-tab name="car-tab" label="Car">
        <div>Car</div>
    </x-tab>
    <x-tab name="bus-tab" label="Bus" hidden>
        <div>Bus</div>
    </x-tab>
    <x-tab name="train-tab" label="Train">
        <div>Train</div>
    </x-tab>
</x-tabs>

<x-tabs
    wire:model="tabSelected"
    active-class="text-primary before:h-1 before:text-primary"
    label-class="uppercase italic"
    content-class="shadow-lg !p-10"
>
    <x-tab name="school-tab" label="School">
        <div>School</div>
    </x-tab>
    <x-tab name="job-tab" label="Job">
        <div>Job</div>
    </x-tab>
    <x-tab name="park-tab" label="Park">
        <div>Park</div>
    </x-tab>
</x-tabs>