JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>XXXXXXXXX</title>
        <meta name="description" content="XXXXXXXXXXXXXXXXX">
        <meta name="author" content="XXXXXXXXXXXXXXXXXXXX">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    </head>
	<style>
	/*----------GLOBAL-------*/
.container{
    width: 97%;
    margin: auto;
    overflow: hidden;
}
.centerAlign{
    text-align: center;
}

/*----------HEADER-------*/
header{
    height: 102px;
}
header div img{
	top: 6px;
	position: relative;
}
.logo_mobile {
    display: none;
}
@media only screen and (max-width: 1100px) {
    .logo_mobile {
    display: inline;
    position: relative;
    top: 25px;
    }
    .logo_desktop {
        display:none;
    }
}
/*----------TOPNAV-------*/
nav {
    background-color: #182d3c;
    color: #fff;
    height: 50px;
    border-bottom: 4px solid #ffd100 !important;
}
nav div ul li{
    display:inline;
}
.navContent{
    position: relative;
    top: 6%;
    height: inherit;
}
/*----------MAIN BODY-------*/
html, 
body {
    height: 100%;
    overflow-x: hidden;
}
.main-section{
	min-height: calc(100% - 291px);
	min-height: -webkit-calc(100% - 291px);
	display: flex;
}
.header{
    border-bottom: 1px solid #e8e8e8;
}
.question{
}
.buttons{/* border-top: 1px solid #e8e8e8; */}

/*---------------RIGHT CONTENT---------------*/

.rightContent{
    overflow: hidden;
    border-left: 1px solid #e8e8e8;
flex:2;
}
/*----LEFT CONTENT---*/
.leftContent{
    float:left;
    flex:7;
}
.header{
}
.buttons{
}
.question{
}

/*----------Footer------*/
footer{
    clear: both;
    position: relative;
    background-color: #e9eef2;
    min-height: 135px;
    width: 100%;
    text-align: center;
}
.footerHead{
    font-weight:400;
    font-size: 20px;
    color: #606d75;
}
/*-----HAMBURGER_____*/
#hamburger_icon{
    float:left;
    height:22px;
    width: 22px;
    display:...