JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <button
    v-for="n in items"
    :class="{ active: active === n }"
    @click="active = n"
  >{{ n.buttonTitle }}</button>
  
  <div v-if="active" :class="[ 'block', active.blockClass ]">
    {{ active.blockTitle }}
  </div>
</div>

CSS

button.active {
  background: red;
}

.block.xxx {
  background: blue;
}
.block.yyy {
  background: green;
}
.block.zzz {
  background: yellow;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    active: null,
    items: [
      { buttonTitle: 'button 1', blockTitle: 'block 1', blockClass: 'xxx' },
      { buttonTitle: 'button 2', blockTitle: 'block 2', blockClass: 'yyy' },
      { buttonTitle: 'button fuck you', blockTitle: 'block fuck you', blockClass: 'zzz' },
    ],
  },
});