JSFiddle - React, Tailwind, and code Playground

by pdivasto

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div 
    class="demo"
    @click="attachRed = !attachRed"
    :class="divClasses">
  </div>
  <div 
    class="demo"
    @click="attachRed = !attachRed"
    :class="{ red: attachRed }">
  </div>
  <div class="demo">
  </div>
</div>

CSS

.demo {
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}

.red { background-color: red }
.green { background-color: green }
.blue { background-color: blue }

JavaScript

new Vue({
	el: "#app",
  data: {
  	attachRed: false
  },
  computed: {
  	divClasses: function () {
    	return {
      	red: this.attachRed,
        blue: !this.attachRed
      }
    }
  }
});