JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root">

  <div id="form">
  
    <input id="nickname" value="Jin" />
    <button id="clear">Clear</button>
    
    <label>
      <input id="greet" type="checkbox" /> Greet
    </label>
    
  </div>

  <p id="greeting">...</p>

</div>

<script src="https://unpkg.com/mol_wire_dom/web.js"></script>

JavaScript

// Make DOM reactive
$mol_wire_dom( document.body )

// Take references to elements
const root = document.getElementById( 'root' )
const form = document.getElementById( 'form' )
const nickname = document.getElementById( 'nickname' )
const greet = document.getElementById( 'greet' )
const greeting = document.getElementById( 'greeting' )
const clear = document.getElementById( 'clear' )

// Set up reactive formulas
greeting.__defineGetter__( 'textContent', ()=> 'Hello ' + nickname.value + '!' )
root.__defineGetter__( 'childNodes', ()=> greet.checked ? [ form, greeting ] : [ form ] )

// Set up handlers
clear.onclick = ()=> nickname.value = ''