<div x-data="{ openTab: 0 }" class="mb-4">

    <nav class="flex p-1 space-x-1 bg-blue-900/20 rounded-t-md">

        {{ $tabName := .Scratch.Get "tabName" }}
        {{ $tabNameCount := len $tabName }}

        {{ range $i, $sequence := (seq $tabNameCount) }}

        <button @click="openTab = {{ $i }}" class="w-full py-2.5 text-sm rounded-md focus:outline-none"
            :class="openTab === {{ $i }} ? 'bg-primary-100 dark:bg-primary-900 shadow' : 'hover:bg-white/[0.12] hover:text-white'"
            href="#">{{ (index $tabName $i) }}</button>

        {{ end }}

    </nav>

    <div class="px-4 py-1 bg-blue-900/20 rounded-b-md">

        {{ .Inner }}

    </div>

</div>