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://code.htmlhifive.com/h5.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <div class="edit container ">
    <form class="form-horizontal">
        <div class="report-content">
          <div class="msg alert alert-danger"></div>
          <div class="worklog">
              <div class="common-items row">
                  <div class="col-sm-4">
                      <div class="form-group">
                          <label class="col-sm-3 control-label" for="reportDate">日付</label>
                          <div class="col-sm-9"><input id="reportDate" name="reportDate" type="date" class="form-control"></div>
                      </div>
                  </div>
                  <div class="col-sm-8">
                      <div class="form-group">
                          <label class="col-sm-3 control-label" for="startTime">勤務時間</label>
                          <div class="col-sm-9">
                              <div class="input-group">
                                  <input id="startTime" name="startTime" type="time" class="form-control">
                                  <span class="input-group-addon">～</span>
                                  <input id="endTime" name="endTime" type="time" class="form-control">
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
            </div>
          </div>
           <div class="section-wrap">
                <div class="section">
                    <div class="section-header row">
                        <div class="col-sm-6">
                            <div class="form-group">
                               <label class="col-sm-2 control-label" for="category">報告区分</label>
                              ...

JavaScript

(function($) {
	var reportController = {
		__name: 'ReportController',
		_formController: h5.ui.FormController,
		__meta: {
			_formController: {
				rootElement: 'form'
			}
		},
		
		__ready: function() {
	    this.$find(".msg").hide();
    	this._formController.addOutput(['style', 'composition']);
      this._formController.setSetting({
        output: {
          style: {
            errorClassName: 'has-error',
            replaceElement: function(element) {
              return $(element).closest('.form-group');
            }
          },
          composition: {
            container: this.$find('.msg'),
            wrapper: 'div'
          },
        },
        	property: {
            title: {
              displayName: 'タイトル'
            },
            category: {
              displayName: '報告区分'
            },
            comment: {
              displayName: '報告内容'
            }
          },
      });
		},
		
		'.confirm click': function(context, $el) {
    	context.event.preventDefault();
      // 入力値の検証
      	if (!this._formController.validate().isValid) {
          this.$find(".msg").show();
          return false;
        } else {
          this.$find(".msg").hide();
        }
		},
		
	};
	
	h5.core.expose(reportController);
})(jQuery);

$(function() {
	h5.core.controller(document.body, ReportController);
});