JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
  <tabs :tabs="tabs" :current.sync="current"></tabs>
  {{current}}
</div>

CSS

.current{
  color:green;
}

JavaScript

Vue.component('tabs', {
	template:`
  <div>
  	<button v-for="tab in tabs" @click="$emit('update:current', tab)" :class="{current:tab == current}">
    	{{tab}}
    </button>
  </div>`,
  props:['tabs','current']
})
new Vue({
	el:'#vue',
  data:{
  	tabs:['One','Two','Three'],
    current:undefined
  }
})