Tabs

<div class="o-tabs" 
    x-data="{
        selectedId: null,
        init() {
            this.$nextTick(() => this.select(this.$id('tab', 1)))
        },
        select(id) {
            this.selectedId = id
        },
        isSelected(id) {
            return this.selectedId === id
        },
        whichChild(el, parent) {
            return Array.from(parent.children).indexOf(el) + 1
        }
    }"
    x-id="['tab']">
    <ul class="o-tab__list o-list-inline | u-space-x-sm" role="tablist"
        x-ref="tablist"
        @keydown.right.prevent.stop="$focus.wrap().next()"
        @keydown.home.prevent.stop="$focus.first()"
        @keydown.page-up.prevent.stop="$focus.first()"
        @keydown.left.prevent.stop="$focus.wrap().prev()"
        @keydown.end.prevent.stop="$focus.last()"
        @keydown.page-down.prevent.stop="$focus.last()"
    >
        <li class="o-list__item">
            <button class="c-btn" type="button" role="tab" :id="$id('tab', whichChild($el.parentElement, $refs.tablist))" @click="select($el.id)" @mousedown.prevent @focus="select($el.id)" :tabindex="isSelected($el.id) ? 0 : -1" :class="isSelected($el.id) ? 'is-active' : 'is-inactive'">Tab 1</button>
        </li>
        <li class="o-list__item">
            <button class="c-btn" type="button" role="tab" :id="$id('tab', whichChild($el.parentElement, $refs.tablist))" @click="select($el.id)" @mousedown.prevent @focus="select($el.id)" :tabindex="isSelected($el.id) ? 0 : -1" :class="isSelected($el.id) ? 'is-active' : 'is-inactive'">Tab 2</button>
        </li>
        <li class="o-list__item">
            <button class="c-btn" type="button" role="tab" :id="$id('tab', whichChild($el.parentElement, $refs.tablist))" @click="select($el.id)" @mousedown.prevent @focus="select($el.id)" :tabindex="isSelected($el.id) ? 0 : -1" :class="isSelected($el.id) ? 'is-active' : 'is-inactive'">Tab 3</button>
        </li>
    </ul>

    <div class="o-tabs__content" role="tabpanels">
        <section class="o-tab__item o-flow" id="tab-1" role="tabpanel" x-show="isSelected($id('tab', whichChild($el, $el.parentElement)))" :aria-labelledby="$id('tab', whichChild($el, $el.parentElement))">
            <h2>Tab 1</h2>
            <p>He's me! I haven't gone by the name Obi-Wan since oh, before you were born. Then the droid does belong to you. Don't seem to remember ever owning a droid. Very interesting. I think we better get indoors.</p>
            <a class="c-link-bare | u-inline-block u-mt-xs" href="#">
                More<svg class="c-icon" viewbox="0 0 18 18" aria-hidden="true">
                    <path d="m6.166 12.833 1.417 1.417 4.25-4.241-4.25-4.259L6.17 7.163 9 10.009z"/>
                </svg>
            </a>
        </section>
        <section class="o-tab__item o-flow" id="tab-2" role="tabpanel" style="display: none" x-show="isSelected($id('tab', whichChild($el, $el.parentElement)))" :aria-labelledby="$id('tab', whichChild($el, $el.parentElement))">
            <h2>Tab 2</h2>
            <p>Shut up! They're moving to attack position. Shields up! Track them. They may come around for another pass. Captain Needa, the ship no longer appears on our scopes. hey can't have disappeared. No ship that small has a cloaking device. Well, there's no trace of them, sir.</p>
            <a class="c-link-bare | u-inline-block u-mt-xs" href="#">
                More<svg class="c-icon" viewbox="0 0 18 18" aria-hidden="true">
                    <path d="m6.166 12.833 1.417 1.417 4.25-4.241-4.25-4.259L6.17 7.163 9 10.009z"/>
                </svg>
            </a>
        </section>
        <section class="o-tab__item o-flow" id="tab-3" role="tabpanel" style="display: none" x-show="isSelected($id('tab', whichChild($el, $el.parentElement)))" :aria-labelledby="$id('tab', whichChild($el, $el.parentElement))">
            <h2>Tab 3</h2>
            <p>I am a Jedi, like my father before me. So be it...Jedi. Move! Move! The shield is down! Commence attack on theDeath Star's main reactor. We're on our way. Red Group, Gold Group, all fighters follow me.</p>
            <a class="c-link-bare | u-inline-block u-mt-xs" href="#">
                More<svg class="c-icon" viewbox="0 0 18 18" aria-hidden="true">
                    <path d="m6.166 12.833 1.417 1.417 4.25-4.241-4.25-4.259L6.17 7.163 9 10.009z"/>
                </svg>
            </a>
        </section>
    </div>
</div>