JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title>Support Site </title>
    <link href="Styles/MasterStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">
        <div id="container">
            <div id="header">
                <div id="logo">
                    <img alt="logo" src="Images/Logo.bmp" />
                </div>
                <div id="titleInfo">
                    <a style="float: left;">Admin ZZXXXXXXZZ Support Site</a>
                    <div id="signOut">
                        <a id="logOnStatus" class="signOut">
                            Logout</a>
                    </div>
                </div>
            </div>
            <div class="clear">
            </div>
            <div id="centralContainer">
                <div id="leftNavContainer">
                    <div id="subContainerForLeftNav">
                        <div id="adminDiv">
                            <div class="backgroundButton" id="adminButton">
                                <p class="buttonText">
                                    Admin</p>
                            </div>
                        </div>
                        <div class="clear">
                        </div>
                        <div id="vendorDiv">
                            <div class="menuTextHeading">
                                <a class="menuText">The Management</a>
                            </div>
                            <div class="buttonAlign">
                                <div class="backgroundButton" id="connectivityButton">
                                    <p class="buttonText">
                                        Test1</p>
                                </div>
                            </div>
                        </div>
                        
                    </div>
 ...

CSS

body
{
    margin: 0px;
    padding: 0px;
    /*text-align: center;*/
    background: Yellow;
}

#wrapper
{
    width: 100%;
    min-width:850px;
    height: auto;
    text-align:left;
    margin: 0 auto;
    /*background: #FFBA31;*/
    background: #FFBA31;
    
}

#container
{
    width: 100%;
    min-width:850px;
    height: auto;
    margin: 0 auto;
    background: white;
    border:1px solid Green;
    
}

#header
{
    width: 100%;
    min-width:850px;
    height: 70px;
    background: white;
    padding: 0 0 10px 0;
    border:1px solid Red;
    
}

#titleInfo
{
    font:bold 18pt Arial;
    color:#2377D1; 
    
    width: 70%;
    min-width:550px;
    
    height:35px;
    float:left;
    margin:10px 0 0 10px;
    border-bottom:3px solid #fcda55;
    padding: 10px 0 0 0;
    display:inline;
    
}

#signOut
{
    font:bold 9pt Arial;
    float:right;
    border-bottom:none;
    padding: 0px 10px 0 0;
    margin: 0px 0px 30px 0;
    display:inline;
}



#logo
{
   
   width: 15%;
   min-width:200px;
   
   height:60px;
   float:left;
   margin:0 0 0 20px;
   display:inline;
   padding: 10px 0 30px 0;
}

#centralContainer
{
    width: 100%;
    min-width:850px;
    height:auto;
    margin: 0 auto;
    background: white;
    border:1px solid Teal;
}


/*Elements within centralContainer*/
#leftNavContainer
{
    
    width: 15%;
    min-width:200px;
    height: 700px;
    float: left;
    margin: 0 0 0 10px;
    /*display: inline;*/
    background: none repeat scroll 0 0 #CCCCCC;
    border:1px solid Cyan;
    
}

#subContainerForLeftNav
{
   width: 15%;
   min-width:190px;
   height: auto;
   /*border:1px solid green;*/
   
}

#mainContainer
{
    width: 80%;
    min-width:550px;
    height: 700px;
    float: left;
    margin: 0 0 0 30px;
    /*display: inline;*/
    background:Orange;
    border:1px solid Red;
}

   


.menuText
{
    font:bold 13pt Arial;
    line-height:15pt;
    color:#00A6B5;
}

.menuTextHeading
{
    height:20px;
    border-bottom:3px...