JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

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

<div id="example-1">
  Hello {{ name }} {{text}}!
</div>

<div id="example-2" class={{class}}>
  <p v-if="greeting">Hello!</p>
</div>

CSS

.test {
 heigth: 50px;
    width: 50px;
    background-color: red;
    transition: 0.3;
}

.bolaxa {
    heigth: 50px;
    width: 50px;
    background-color: blue;
}

JavaScript

var exampleData = {
  name: 'Vue.js',
  text: 'lololo'
}

// create a Vue instance, or, a "ViewModel"
// which links the View and the Model
var exampleVM = new Vue({
  el: '#example-1',
  data: exampleData
})

let exampleVM2 = new Vue({
  el: '#example-2',
  data:  {
  	class: 'test',
 		greeting: true
	},
  ready: () => {
   console.log('trololo');
  }
})

setTimeout(() => {
  exampleVM2.class = 'bolaxa'
}, 5000);