JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<div>This is a Tab</div>

CSS

body {
    margin:2em;
}
div {
	background-color:#6699cc;
    color:white;
    font-family:sans-serif;
    padding:0.5em 1em;
    display:inline-block;
    border-top-left-radius:10px;
    border-top-right-radius:30px 50px;
}

JavaScript

(function(j){function r(a,b){return function(){return b.apply(a||this,arguments)}}function C(a){y?a.call(document):D.push(a)}function E(a,b){var c=a.style.left,d=a.runtimeStyle.left,e=a.currentStyle[b];if(G.test(e))return parseInt(a.currentStyle[b],10);if(H.test(e)){a.runtimeStyle.left=a.currentStyle.left;a.style.left=e;e=a.style.pixelLeft;a.style.left=c;a.runtimeStyle.left=d;return e}return 0}function A(a){var b;if(!a||!a.nodeName||!a.type)return false;b=a.nodeName.toUpperCase();a=a.type.toLowerCase();
return b==="BUTTON"||b==="INPUT"&&(a==="image"||a==="button"||a==="submit"||a==="reset")}function F(a){var b;if(!a||!a.nodeName)return false;b=a.nodeName.toUpperCase();b==="INPUT"&&a.type.toLowerCase();return b==="INPUT"&&(a.type==="text"||a.type==="password")||b==="TEXTAREA"}function w(){var a;if(y)document.detachEvent("onreadystatechange",w);else if(document.readyState==="complete"){document.detachEvent("onreadystatechange",w);if(document.body)for(y=true;a=D.shift();)a.call(document);else setTimeout(w,
13)}}function n(a,b){if(a[t]&&p[a[t]])throw Error("Can\u2019t round already rounded rectangles (use RoundRect.create)");p[a[t]=++I]=this;this.element=a;this.onPropertyChangeProxy=r(this,function(){var c=this,d=window.event.propertyName;setTimeout(function(){c.onPropertyChange.call(c,d)})});this.onStateChangeProxy=r(this,function(){var c=this,d=window.event.type;setTimeout(function(){c.onStateChange.call(c,d)})});this.onVmlStateChangeProxy=r(this,function(){this.onVmlStateChange(window.event.type,
window.event.toElement)});this.events={element:{},container:{}};C(r(this,function(){this.render();b&&this.start()}))}if(window.attachEvent){var s="RoundRect",t=s+(new Date).getTime(),I=0,p={},B=document.documentMode===8,y=false,D=[],u={},G=/^-?\d+(?:px)?$/i,H=/^-?\d/,z=s+"-hover";(function a(){var...