AlpineJS ile tab bileşeni yapımı

Tab.html

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js"></script>

<div x-data="{ tab: 'main' }">
  <a :class="{ 'active': tab === 'main'    }" @click="tab = 'main'" href="#main" >Ana sayfa</a>
  <a :class="{ 'active': tab === 'about'   }" @click="tab = 'about'" href="#about">Hakkımızda</a>
  <a :class="{ 'active': tab === 'contact' }" @click="tab = 'contact'" href="#contact">İletişim</a>
  </br></br>
  <div x-show="tab === 'main'">Ana sayfa</div>
  <div x-show="tab === 'about'">Hakkımızda</div>
  <div x-show="tab === 'contact'">İletişim</div>
</div>

<style>
  a { text-decoration: none; padding: 5px; }
  a.active { background-color: dodgerblue; color: #fff; }
</style>