JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://code.htmlhifive.com/h5.js"></script>
<link rel="stylesheet" href="code.htmlhifive.com/h5.css">
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/animate/src/animate.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/replaceBox/src/replaceBox.js"></script>
<script src="https://hifive.github.io/hifive-res/ext/jqplugins/easing/1.3/jquery.easing.1.3.js"></script>
<div class="outerBox">
  <select>
    <option value="slideLeft">slideLeft</option>
    <option value="slideRight">slideRight</option>
    <option value="slideUp">slideUp</option>
    <option value="slideDown">slideDown</option>
    <option value="pushLeft">pushLeft</option>
    <option value="pushRight">pushRight</option>
    <option value="pushUp">pushUp</option>
    <option value="pushDown">pushDown</option>
    <option value="openLeft">openLeft</option>
    <option value="openRight">openRight</option>
    <option value="openUp">openUp</option>
    <option value="openDown">openDown</option>
    <option value="fade">fade</option>
  </select>

  <div class="replaceBox" style="width:100px;height:100px;">
    <div>0</div>
  </div>
</div>

CSS

.replaceBox div{
  color:#ffffff;
  text-align:center;
  line-height:100px;
  height:100%;
  background-color:blue;
  color:white;
}

JavaScript

$(function() {
	var outerBoxController = {
		__name: 'OuterBoxController',
    __count: 0,
		replaceBoxController: h5.ui.container.ReplaceBoxController,
		__meta: {
			replaceBoxController: {
				rootElement: '> .replaceBox'
			},
		},
		__init: function(context) {
		},
    
		'> .replaceBox click': function() {
    	this.__count += 1;
    	var count = this.__count;
			var element = $('<div>'+count+'</div>');
			var input = this.$find('select')[0];
			var transition = input.options[input.selectedIndex].value;
      this.replaceBoxController.replace(element, {transition: transition});
		},
	};

	h5.core.controller('.outerBox', outerBoxController);
});