JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.15/riot+compiler.min.js"></script>
<overlay class="test"></overlay>
<script type="riot/tag">
<overlay class="{
    'animate': true,
    'open': open,
  } {classNames}">
  	<div class="outer">I have too many classes :( <span name="classes"></span></div>
    
    this.classNames = this.opts.class;
    
    this.on('mount', function(){
    	// Note: This shows extra classes appended
    	this.classes.innerText = this.root.classList;
    });
</overlay>
</script>

CSS

.outer{
  width:100px;
  height: 100px;
  border: 1px solid #000;
}

JavaScript

/**
 * Riot.js is loaded from External Resources
 * https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.15/riot+compiler.min.js(riot.min.js+compiler.min.js)
 */
riot.mount('overlay');