JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    #sqr1 {
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
    </style>    
</head>
<body>
<div style="display:none;" id="sqr1">
</div>

<a href="#" id="show">Show</a>
<script type="text/javascript">
(function(){var a={addHandler:function(b,d,c){if(b.addEventListener){b.addEventListener(d,c,false)}else{if(b.attachEvent){b.attachEvent("on"+d,c)}else{b["on"+d]=c}}},preventDefault:function(b){if(b.preventDefault){b.preventDefault()}else{b.returnValue=false}},target:function(b){return b.target||b.srcElement},event:function(b){return b||window.event}};window.EventUtil=a})();

var attrChangeListener = function( elem, fn ) {
    /*
    if( elem.onpropertychange === undefined ) {
        EventUtil.addHandler( elem, 'DOMAttrModified', fn );
    } else {
        EventUtil.addHandler( elem, 'propertychange', fn );
    }
    */
    EventUtil.addHandler( elem, 'DOMSubtreeModified', fn );
};

EventUtil.addHandler( window, 'load', function() {
    var showElem = document.getElementById( 'show' );
    var sqr1 = document.getElementById( 'sqr1' );
    
    EventUtil.addHandler( showElem, 'click', function() {
        if( sqr1.style.setAttribute ) {
            sqr1.style.setAttribute( 'display', 'block' );
        } else {
            sqr1.setAttribute( 'style', 'display:block;' );
        }
    } )
    
    attrChangeListener( sqr1, function( event ) {
        alert( EventUtil.target( event ) );
        alert( event.type );
        alert( 'Attrubute Name:' + ( event.attrName || '' ) );
        alert( 'Attribute Change:' + ( event.attrChange || '' ) );
        alert( 'Previous value:' + ( event.prevValue || '' ) );
        alert( 'New value:' + ( event.newValue || '' ) );
    } );
} );
</script>
</body>
</html>