JSFiddle - React, Tailwind, and code Playground

by Getulio Ferreira

HTML

<div id="toolBtns">
<div class="btn-group" role="group" id="toolBtns">
  <button class="btn" type="button" @click="activeBtn = 'btn1'" :class="{active: activeBtn === 'btn1' }">Btn1</button>
  <button class="btn" type="button" @click="activeBtn = 'btn2'" :class="{active: activeBtn === 'btn2' }">Btn2</button>
  <button class="btn" type="button" @click="activeBtn = 'btn3'" :class="{active: activeBtn === 'btn3' }">Btn3</button></div>
</div>

CSS

.active{
  background-color:red;
}

JavaScript

var vm = new Vue({
	 el: '#toolBtns',
	 data: {
 		activeBtn:''
	 }
 });