<!-- nosimple -->
<div x-data="{tab: 1, btnCount: 0, cssActive: 'bg-primary600 t-white', cssInactive: 'bg-gray500 t-white', cssDefault: 'button rounded0 rounded10-t mar3-r'}" class="mar30-tb">

    <div class="b-flex">
        <span x-data="{ id: ++btnCount }" :class="[tab == id ? cssActive : cssInactive, cssDefault]" @click="tab = id">Tab1</span>
        <span x-data="{ id: ++btnCount }" :class="[tab == id ? cssActive : cssInactive, cssDefault]" @click="tab = id">Tab2</span>
        <span x-data="{ id: ++btnCount }" :class="[tab == id ? cssActive : cssInactive, cssDefault]" @click="tab = id">Tab3</span>
    </div>

    <div x-effect="Array.from($el.children).forEach((child, index) => child.style.display = (index + 1 === tab) ? '' : 'none')" class="pad20-rl pad20-t bordered rounded10-b rounded10-r" x-cloak>
<!-- /nosimple -->
        
        <!-- каждая вкладка в отдельном блоке -->
        <div class="animation-fade">
            Таб 1
        </div>
        
        <div class="animation-fade">
            Таб 2
        </div>
        
        <div class="animation-fade">
            Таб 3
        </div>
        
    </div>
</div>