JSFiddle - React, Tailwind, and code Playground

by ericmorand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.7.4/riot.js"></script>
<test>
   <div>
     <input onkeydown="{keydown}">
   </div>
   <div class="test {model ? 'enabled' : ''}">
     <input value="{model.value}">
   </div>
</test>

CSS

.test {
  opacity: 0;
  transition: opacity 2s;
}

.test.enabled {
  opacity: 1;
}

JavaScript

let model = {
	value: null
};

riot.tag('test', false, function(opts) {
  this.model = model;
  
  model.value = 'test';

  this.keydown = function(event) {
  	this.preventUpdate = true;
    
    this.model = null;
  
    this.update();
  }
});

riot.mount('test');