JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <form>
      <fieldset>
        <legend>Legend</legend>
        <label>Label name</label>
        <input type="text" name='name' id='name' placeholder="Type something…">
        <span class="help-block">Example block-level help text here.</span>
        <label class="checkbox">
          <input type="checkbox"> Check me out
        </label>
    <button type="submit" class="btn">Submit</button>
  </fieldset>
</form>
</div>

CSS

/* @import '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'; */;

JavaScript

(function($){
    
    $(document).on('nameEnter', showName);
    
    input = $('#name');
    input.on('keyup', function(){
        var value = $(this).val();
        $.event.trigger({
            type:'nameEnter',
            value:value,
            time: new Date()
        });
    });

}(jQuery));

    function showName (params){
        console.log('params is', params.value);
    };