JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div>
  <input type="checkbox" v-model="redText" /> Red Text
</div>
<div>
  <input type="checkbox" v-model="blueBorder" /> Blue Border
</div>
<div>
<input type="checkbox" v-model="yellowBg" /> Yellow Background
</div>


<div :class="{ red: redText, blue: blueBorder, yellow: yellowBg }">
  Some Text
</div>

CSS

.red {
  color: red;
}

.blue {
  border: 3px solid blue;
}

.yellow {
  background-color: yellow;
}

JavaScript

new Vue({
	el: 'body',
  data: {
  	redText: false,
    blueBorder: true,
    yellowBg: false,
  },
});