<div id="app">
  <h2>Tabs</h2>
  <div class="tab">
    <ul class="tab__title">
      <li @click="activate(1)" :class="{'active' : isActive === 1}">🐸</li>
      <li @click="activate(2)" :class="{'active' : isActive === 2}">🌸</li>
      <li @click="activate(3)" :class="{'active' : isActive === 3}">🌕</li>
    </ul>
    <ul class="tab__content">
      <li v-if="isActive === 1">古池や蛙飛びこむ水の音</li>
      <li v-else-if="isActive === 2">散る桜残る桜も散る桜</li>
      <li v-else-if="isActive === 3">名月をとってくれろと泣く子かな</li>
    </ul>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
*
  margin: 0
  padding: 0
  box-sizing: border-box

body
  background: #fafbfc
  padding: 10px
  color: #333
  h2
    margin-bottom: 1em

#app
  width: 100%
  max-width: 600px
  margin: 0 auto
  padding: 20px
  background: white
  box-shadow: 0 1px 3px rgba(0,0,0,.1)
  ul
    list-style: none
    &.tab
      &__title
        display: flex
        li
          text-align: center
          width: 30.333%
          margin: 0 1.5%
          padding: .5em
          border: 1px solid #eee
          border-radius: 30px
          &.active
            background: #eee
      &__content
        margin: 30px 0
        padding: 1em
        background: whitesmoke
        text-align: center
View Compiled
let vm = new Vue({
  el: '#app',
  data: {
    isActive: 1
  },
  methods: {
    activate(num){
      this.isActive = num;
    },
  }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.