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>
<script src="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/jquery-ui-1.9.1.custom.min.js"></script>
<link rel="stylesheet" href="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/smoothness/jquery-ui-1.9.1.custom.min.css">
	<div id="container" style="border: 1px gray solid; padding: 30px;">
		<div id="dialog-form" title="Create new user" style="display: none;">
			<form>
				<fieldset>
					<label for="name">ID</label> <input type="text" name="id" id="id"
						class="text ui-widget-content ui-corner-all" /> <label
						for="email">名前</label> <input type="text" name="userName"
						id="userName" value=""
						class="text ui-widget-content ui-corner-all" /> <label
						for="password">パスワード</label> <input type="password"
						name="password" id="password" value=""
						class="text ui-widget-content ui-corner-all" />
				</fieldset>
			</form>
		</div>
		<table id="result" class="ui-widget ui-widget-content"
			style="margin: 1em 0; border-collapse: collapse;">
			<tr class="ui-widget-header">
				<th>ID</th>
				<th>名前</th>
				<th>パスワード</th>
			</tr>
			<tr>
				<td>test_id</td>
				<td>test_name</td>
				<td>test_password</td>
			</tr>
		</table>
		<input type="button" id="register" value="register" />
	</div>
  
<script type="text/ejs" id="row">
    <tr>
      <td>[%= id %]</td>
      <td>[%= userName %]</td>
      <td>[%= password %]</td>
  </tr>
</script>

CSS

table th {
	font-size: 12px;
	font-weight: bold;
	border: 2px solid #EEE;
	padding: 10px 10px;
	text-align: left;
}

table td {
	border: 1px solid white;
	padding: .6em 10px;
	text-align: left;
}

label {
	display: block;
}

JavaScript

$(function() {
	// ダイアログロジック
	var dialogLogic = {
		__name: 'DialogLogic',

		createUser: function() {
			this._private();
		},

		_private: function() {
			alert('create user!');
		}
	};

	var controller = {

		__name: 'DialogController',

		dialogLogic: dialogLogic,

		__ready: function() {
			// registerボタンの装飾
			$('#register').button();

			var that = this;

			// dialogの設定
			// ボタンを押した時のコールバックはhifive化したコントローラのメソッドを設定している。
			$('#dialog-form').dialog({
				autoOpen: false,
				height: 320,
				width: 350,
				modal: true,
				buttons: {
					'Create User': that.ownWithOrg(that.createUser),
					Cancel: that.ownWithOrg(that.cancel)
				},
				close: that.own(that.clearForm)
			});
		},

		'#register click': function() {
			$('#dialog-form').dialog('open');
		},

		// ダイアログの"Create User"ボタンがクリックされた時のコールバック
		// thisはコントローラ自身を指す。本来のthisはthis.context.thatに格納されている。
		createUser: function(originalThis, event) {
			// DialogLogicのcreateUserメソッドを呼ぶ
			this.dialogLogic.createUser();
			// 画面に追加する文字列を取得
			var row = this.view.get('row', {
				id: $('#id').val(),
				userName: $('#userName').val(),
				password: $('#password').val()
			});
			$('#result tbody').append(row);
			$('#dialog-form').dialog('close');
		},

		//
		cancel: function(target, event) {
			$('#dialog-form').dialog('close');
		},

		// ダイアログ内のフォームをクリアする
		clearForm: function() {
			$('#id').val('');
			$('#userName').val('');
			$('#password').val('');
		}
	};

	// コントローラの作成と要素へのバインド.
	h5.core.controller('#container', controller);
});