JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>dom</title>
    
</head>

<body>
<script type="text/javascript" defer="defer">
    // IE 브라우저를 위한 defer 설정
    console.log('defer(interactive) : ' + 'obj = ' + (document.getElementById('imageObject') && document.getElementById('imageObject').width)); // 700(image width 사이즈)
</script>
<script type="text/javascript">

function ready(fn)
{
    fn = fn || function(){ ; };
   
    if (ready.load){
        ready.callback.push(fn);
    }
    else if (!ready.load)
    {
        ready.callback = [fn];
 
        if (document.addEventListener)
        {
            ready.load = true;
 
            appendEvent(document, 'DOMContentLoaded', function()
            {  
                removeEvent(document, 'DOMContentLoaded', arguments.callee);
 
                for (var i = 0, length = ready.callback.length; i < length; i++){
                    ready.callback[i]();
                }
 
                ready.load = false;
            });
        }
        else if (document.attachEvent)
        {
            ready.load = true;
           
            appendEvent(document, 'readystatechange', function()
            {
                if (document.readyState === 'complete' || document.readyState === 'loaded')
                {                  
                    removeEvent(document, 'readystatechange', arguments.callee);
 
                    for (var i = 0, length = ready.callback.length; i < length; i++){
                        ready.callback[i]();
                    }                  
                }
 
                ready.load = false;
            });
        }
    }
};
 
// 해당 엘리먼트의 이벤트 삽입
function appendEvent(elem, type, handler){
 
    type = typeof type === 'string' && type || '';
    handler = handler || function(){ ; };
   
    if...