JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<link rel="stylesheet" href="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/smoothness/jquery-ui-1.9.1.custom.min.css">
<script src="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryvalidate/jquery.validate.js"></script>
<div id="container">
  <div id="container1">
    <input type="text" id="text" />
  </div>

  <div id="container2">
    <p class="message">ここにメッセージがきます
    </p>
  </div>
</div>

JavaScript

$(function() {
	var controller = {
		__name: 'aController',
		'#text keyup': function(cotnext, $el) {
			let text = this.$find("#text").val();
			this.trigger('sendMessage', {
				text: text
			})
		}
	}
	
	h5.core.expose(controller);
});

$(function() {
	var controller = {
		__name: 'bController',
		getMessage: function(message) {
			this.$find(".message").text(message);
		}
	}

	h5.core.expose(controller);

});

$(function() {
	var controller = {
		__name: 'parrentController',
		_sendController: aController,
		_buttonController: bController,
    __meta: {
			_sendController: {
				rootElement: '#container1'
			},
			_buttonController: {
				rootElement: '#container2'
			}
		},
		__ready: function() {
			
		},
		'{rootElement} sendMessage': function(context) {
			let text = context.evArg.text;
			this._buttonController.getMessage(text);
		}
	}
	
	h5.core.controller('#container', controller);	
});