<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>