@props([
    'selected' => null,
    'labelClass' => 'px-4 py-3 cursor-pointer',
    'activeClass' => 'font-medium border-b border-b-gray-400',
    'labelDivClass' => 'border-b border-b-base-content/10 flex overflow-x-auto',
    'tabsClass' => 'relative w-full',
])

<div
    x-data="{
        tabs: [],
        selected:
            @if($selected)
                '{{ $selected }}'
            @else
                @entangle($attributes->wire('model'))
            @endif
    }"
    class="{{ $tabsClass }}"
    x-class="font-semibold pb-1 border-b-[length:var(--border)] border-b-base-content/50 border-b-base-content/10 flex overflow-x-auto scrollbar-hide relative w-full"
>
    <div class="{{ $labelDivClass }}">
        <template x-for="tab in tabs" :key="tab.name">
            <a
                role="tab"
                x-init="if (typeof tab == 'undefined') $el.remove()"
                x-html="tab.label"
                @click="tab.disabled ? null: selected = tab.name"
                :class="{ '{{ $activeClass }} tab-active': selected === tab.name, 'hidden': tab.hidden }"
                class="{{ $labelClass }}"></a>
        </template>
    </div>

    <div role="tablist" {{ $attributes->except(['wire:model', 'wire:model.live'])->class(['block']) }}>
        {{ $slot }}
    </div>
</div>