<div class="w-full">
	<div class="w-1/2 rounded mx-auto bg-white shadow" x-data="{ tab: 'foo' }">
		<div class="grid grid-cols-2 gap-8 mb-4">
			<button class="px-6 py-2 rounded focus:outline-none focus:shadow-outline transition-all duration-150" :class="{ 'bg-gray-500': tab === 'foo', 'bg-gray-800 text-white': tab === 'bar' }" @click="tab = 'foo'">Foo</button>
			<button class="px-6 py-2 rounded focus:outline-none focus:shadow-outline transition-all duration-150" :class="{ 'bg-gray-500': tab === 'bar', 'bg-gray-800 text-white': tab === 'foo' }" @click="tab = 'bar'">Bar</button>
		</div>

		<div x-show="tab === 'foo'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-0" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-0">
			<img src="https://source.unsplash.com/user/erondu/500x500" alt="Foo" class="w-full" />
		</div>
		<div x-show="tab === 'bar'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-0" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-0">
			<img src="https://source.unsplash.com/random/500x" alt="Bar" class="w-full" />
		</div>
	</div>
</div>