JSFiddle - React, Tailwind, and code Playground

by Christian Meixner

HTML

<script src="//unpkg.com/[email protected]"></script>
<div id="demo"></div>
<script id="tmpl" type="text/template">
<button on-click="@this.toggleClass()">Toggle Color</button><br><br>

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100" class-red="{{active}}" />
</svg>

<div class="box" class-divRed="{{active}}">DIV</div>
</script>

CSS

body {font-family:helvetica; font-size:12px}
.red {fill:#c00;}
div.box {background:#000; width:100px; height: 100px; color:#fff; margin-top:10px;}
.box.divRed {background:#c00;}

JavaScript

Ractive.WELCOME_MESSAGE = false;
console.log(Ractive.VERSION);

var app = new Ractive({
  el: '#demo',
  template: '#tmpl',
  toggleClass: toggleClass,
  data: {
  	active:true
  }
});

function toggleClass() {
	app.toggle('active');
}