JSFiddle - React, Tailwind, and code Playground

by UnsungHero97

HTML

<div id="wrapper">
    
    <div id="content">
        <!-- stuff here that isn't relevant -->
        <div id="workbench">
            
            <ul id="menu">
                <li>Menu Item 1</li>
                <li>Menu Item 2</li>
                <li>Menu Item 3</li>
            </ul>
            
            <div id="container1">
                <div id="container2">
                    <div id="column1">
                        <div id="symbols-block">
                            <div>
                                <h3>Greek</h3>
                            </div>
                            <div>
                                <h3>Operator</h3>
                            </div>
                            <div>
                                <h3>Relational</h3>
                            </div>
                            <div>
                                <h3>Set</h3>
                            </div>
                            <div>
                                <h3>Negated</h3>
                            </div>
                            <div>
                                <h3>N-Ary</h3>
                            </div>
                            <div>
                                <h3>Bracket</h3>
                            </div>
                            <div>
                                <h3>Arrow</h3>
                            </div>
                            <div>
                                <h3>Other</h3>
                            </div>
                        </div>
                    </div>
                    <div id="column2">
                        <div id="output"> fancy cool content here!!!</div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div><!-- end #workbench -->
        
        <div class="clear"></div>
    </div><!-- end #content -->
    
    <div class="clear"></div>
</div><!-- end #wrapper -->
<div id="footer">
   ...

CSS

html,body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    
}

body {
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
}

#wrapper {
    width: 500px;
    min-height: 100%;
    margin: auto;
}

#content {
    padding-top: 16px;
    padding-bottom: 37px;
    display: block;
    position: relative;
    overflow: hidden;
}

#footer {
    background-color: #FFFFFF;
    border-top: 1px solid #e3e3e3;
    height: 36px;
    margin: auto;
    margin-top: -37px;
    position: relative;
    clear: both;
    z-index: 1100;
}

#footer p {
    color: #777777;
    font-size: 12px;
    line-height: 36px;
    text-align: center;
}

.clear {
    clear: both;
}

#symbols-block { /*border-right: 1px solid #5DACF8;*/
    border-right: 1px solid #E3E3E3;
    width: 100px;
    padding-top: 8px;
    clear: both;
    float: left;
    position: relative;
    overflow: hidden;
    z-index: 1080;
}

#symbols-block h3 {
    font-size: 13px;
    font-weight: lighter;
    text-align: center;
    padding-bottom: 8px;
    text-shadow: 1px 1px 2px #D3D3D3;
    clear: both;
    cursor: pointer;
}

#workbench {
    height: 100%;
    width: 100%;
    margin-top: 64px;
    clear: both;
    position: relative;
}

#workbench ul#menu {
    background-color: #FFFFFF;
    border-bottom: 1px solid #e3e3e3;
    font-size: 11px;
    font-weight: bold;
    height: auto;
    width: 100%;
    list-style: none;
    position: relative;
    z-index: 1100;
}

#workbench ul#menu li {
    border: 1px solid #e3e3e3;
    height: auto;
    width: auto;
    margin: 0px;
    padding: 4px 8px;
    margin-left: 4px;
    cursor: default;
    line-height: normal;
    list-style-type: none;
    text-align: center;
    display: inline-block;
    /*float: left;*/
    position: relative;
    bottom: -1px;
    left: 156px;
}

#container1 {
    background-color: #c9e6ff;
    width:100%;
    float:left;
    clear:left;
    overflow:hidden;
}

#container2 {
    background-color:...