JSFiddle - React, Tailwind, and code Playground

HTML

<!-- jQuery defer code body: put this at the beginning of body, deferring jQuery codes until it is loaded -->
<script>
	window.jQueryQ = window.jQueryQ || [];
  window.$ = window.jQuery = function(){
  	window.jQueryQ.push(arguments);
  }
</script>
<!-- end: jQuery defer code body -->

<!-- the body -->
<div id="test"></div>
<a href="javascript:void(0)" id="testLink" onclick="jQuery(function(){jQuery('#test').append(' link click<br>')})">test link</a>

<script>
	// test: functions pushed to jQuery while it isn't loaded
	jQuery(function(){
  	jQuery('#test').append('hello from jQuery<br>')
  });
  $(function(){
  	jQuery('#test').append('hello from $<br>')
  });

	// test: clicking on an element
  function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
  }
  eventFire(document.getElementById('testLink'), 'click');
</script>


<!-- load jQuery in the footer -->
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<!-- jQuery deferring code footer: add this to the end of body and after the jQuery code -->
<script>
  jQuery(function(){
    jQuery.each(window.jQueryQ||[],function(i,a){
    	// to understand why setTimeout 0 is useful, see: https://www.youtube.com/watch?v=8aGhZQkoFbQ, tldr: having a lot of calls wont freeze the website
      setTimeout(function(){
      	jQuery.apply(this,a);
      },0);
    });
  });
</script>
<!-- end: jQuery deferring code footer -->