JSFiddle - React, Tailwind, and code Playground

by Gopinath Kaliappan

HTML

<script src="https://unpkg.com/vue/dist/vue.js"> </script>

<div id="app">
<span 
  v-on:mouseOver="changeClass"  
  v-bind:class="{'active': isHovered}"
  v-on:mouseOut="changeClass"
 >{{title}}</span>
</div>

CSS

.active {
  color: green;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	title: 'Great',
    isHovered: false
  },
  methods: {
  	changeClass: function() {
    	this.isHovered = !this.isHovered;
    }
  }
})