JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app>

  al-value = <input type="text" al-value="name" />
  <button @click="name='red'">red</button><br/>
  :value = <input type="text" :value="name" :disabled="box" :placeholder="name" />

  <hr/>
  al-checked = <input type="checkbox" al-checked="box" /> <br/>
  :checked = <input type="checkbox" :checked="box" />
  
  <hr/>
  <div class="box" :box="box?1:null"></div>
  <div :class="name + ' box'"></div>
  
  <br/>
  <input type="text" :value.tpl="name={{name}} and box={{box}}" disabled />

</div>

CSS

.box {
  width: 50px;
  height: 50px;
  border: 1px solid blue;
}
[box] {
  background-color: green;
}
.red {
  background-color: red;
}