<div x-data="{ tab: 'foo' }">
<div class="grid grid-cols-2 gap-8">
<button :class="{ 'bg-gray-500': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
<button :class="{ 'bg-gray-500': tab === 'bar' }" @click="tab = 'bar'">Bar</button>
</div>
<div x-show="tab === 'foo'">Tab Foo</div>
<div x-show="tab === 'bar'">Tab Bar</div>
</div>