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

External CSS

  1. https://cdn.jsdelivr.net/npm/tailwindcss@1.x.x/dist/tailwind.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js