JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	    <meta charset="utf8" />
	    <title></title>
		<style type="text/css">
			.clickable{
				display:inline-block;
			}
			.bar{
				width:0%;
			    border-color:#00758C;
			    border-bottom-style:solid;
			    border-bottom-width:1px;
			}
		</style>
		<script type="text/javascript">
			var OnHold =
			{
				limit:1500, /*button down long*/
				overlimit:2500, /*button down too long*/
				animatesteps:20, /*animate every x milliseconds*/
				animateif:10, /*animate if percent of limit is >= x*/
				timelimit:false,
				timeover:false,
				ticker:false,
				bar:false,
				perc:false,
				a:false,
				debug:false, /*log info and e-msgs in console*/
				tagname_bar:'div',
				tagname_bar_pos:0,
				classname_bar:'bar',

				mtime:function(){
				    var d = new Date();
				    return d.getTime();
				},
				animate:function(elem){
					if(!OnHold.timeover){
						clearInterval(OnHold.ticker);
						if(OnHold.bar){
							OnHold.bar.style.width = "0%"
							OnHold.bar = null;
						}
						OnHold.perc = null;
						OnHold.a = null;
						return;
					}
					if(!OnHold.ar){
						OnHold.bar = elem.getElementsByTagName(OnHold.tagname_bar)[OnHold.tagname_bar_pos];
						/*debug:*/if(!OnHold.bar){
							OnHold.log('elem.getElementsByTagName("'+OnHold.tagname_bar+'")['+OnHold.tagname_bar_pos+'] not found!','animate');
							return;
						}
						/*debug:*/if(OnHold.bar.className != OnHold.classname_bar){
							OnHold.log('elem.getElementsByTagName("'+OnHold.tagname_bar+'")['+OnHold.tagname_bar_pos+'].className != "'+OnHold.classname_bar+'"!','animate');
						}
					}
					OnHold.a = (!OnHold.a)
						?100/OnHold.limit*OnHold.animatesteps
						:OnHold.a;
					OnHold.perc = (!OnHold.perc)
						?OnHold.a
						:(OnHold.perc+OnHold.a>100)
							?100
							:OnHold.perc+OnHold.a
					;
					OnHold.bar.style.width =...