JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
        <div id="pagetopwrap">
        </div>
        <div id="pagemainliquid">
		    <div id="pagemainwrap">
                <div id="content">

		            <div id="headerwrap">
		                <div id="header_left">
		                </div>
		                <div id="header_main">
		                    <div id="logo_row">
		                        <p id="logotext">Site Title</p>
		                    </div>
		                    <div id="menu_row">
                                <!-- irrelevant menu button code -->
		                    </div>
		                </div>
		                <div id="header_right">
		                </div>
		            </div>
		            <div id="contentbody">
		                <div id="contenttext">
                            <p id="contenttextmakeup">Lorum Ipsum Dolor Sit Amet</p>
                        </div>
                    </div>
                 </div>
            </div>
        </div>
        <div id="leftcolumnwrap">
            <div id="leftcolumn">
            </div>
        </div>
        <div id="rightcolumnwrap">
            <div id="rightcolumn">
            </div>
        </div>
        <div id="footerwrap">
            <div id="footer">
            </div>
        </div>
    </div>
    </body>

CSS

body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 13px;
	    background-color: #0f0f0f; /* is normally an image */
    }

    #wrapper {
        width: 100%;
        min-width: 960px;
        max-width: 1920px;
        margin: 0 auto;
	    height: 100%
    }

    #pagetopwrap {
        height: 50px;
        width: 100%;
        float: left;
        margin: 0 auto;
    }


    #pagemainliquid {
        float: left;
    }

    #pagemainwrap {
        margin-left: 170px;
        margin-right: 170px;
        float: left;
    }

    #leftcolumnwrap {
        width: 170px;
        margin-left:-100%;
        float: left;
    }

    #leftcolumn {
        margin: 5px;
    }

    #rightcolumnwrap {
        width: 170px;
        margin-left: -150px;
        float: left;
    }

    #rightcolumn {
        margin: 5px;
    }

    #footerwrap {
        width: 100%;
        float: left;
        margin: 0 auto;
        clear: both;
	    bottom:50px;
    }

    #footer {
        height: 0px;
        margin: 5px;
    }

    #headerwrap {
        width: 100%;
        margin: 0 auto;
    }
    #header_left {
        background-color: #ff0000; /* is normally an image */
        width:25px;
        height:200px;
	    float:left;
    }
    #header_right {
        background-color: #ff0000; /* is normally an image */
        width:25px;
        height:200px;
	    margin-left: 0px;
	    float:right;
		position:relative; top:-200px;
    }
    #header_main {
        background-color: #00ff00; /* is normally an image */
        margin-left: 25px;
        margin-right: 25px;
        height:200px;
	    background-size: 100% 200px; 
    }
    #contentbody {
        background-color: #E2E2E2;
        border-radius: 10px;
	    margin-top:10px;
        border: 1px solid #A7A7B2;
    }
    #contenttext {
        margin-left:10px;
        margin-right:10px;
    }
    #logo_row {
        height:150px;
        width:100%;
        float:left;
    }
    #logotext {
  ...