JSFiddle - React, Tailwind, and code Playground

by mogu10

HTML

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

<div id="exercise">
  <div class="demo" @click="attachRed = !attachRed; changeWidth()" :class="colorChange()"></div>
  <div class="demo" :class="{red: attachRed}"></div>
  
  
</div>

CSS

.demo {
    background-color: pink;
    width :200px;
    height: 200px;
    margin: 10px;
}

.red {
    background-color: red;
  }

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

JavaScript

new Vue({
el: '#exercise',　
data: {
	attachRed: false,
  width: 50
},
methods: {
	colorChange: function() {
  	return {
  		red: this.attachRed,
      demo: this.width = 30 + 'px'
    }
  },
  changeWidth: function() {
  	return {
    	width: this.width = 100
    }
  }
  

},
});