JSFiddle - React, Tailwind, and code Playground

by floyd10086

HTML

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

<div id="app">
 <div class="demo" :style="backgrounColor:color"></div>
 <div class="demo"></div>
 <div class="demo"></div>
 <input type='text' v-model='color'/>
</div>

CSS

#app {
  display: flex;
  justify-content: space-between;
  width: 600px;
}
.demo {
  width: 100px;
  height: 100px;
  background-color: #eee;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
[type='text'] {
  height: 32px;
  align-self: center;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    color: 'green'
  }
});