JSFiddle - React, Tailwind, and code Playground

by Kamlesh Gupta

HTML

<header>
  <div id="headerContent">
    <div class="header-inline" >
        <span id="txtHeader"> Universal Education</span>
    </div>
    <div class="header-inline">
      <button type="button" id="logout">Click Me!</button>
        </div>
    </div>
   
   <div>
 </header>
    
  
    <section id="sidebar">
       <ul id="sidebarControls">
           <li>Kamlesh</li>
           <li>Kamlesh</li>
           <li>Kamlesh</li>
        <ul>
    </section>
  <section id="rightMenu">
      <div id="controlMenu">
       <ul id="sidebarControls">
           <li>Kamlesh</li>
           <li>Kamlesh</li>
           <li>Kamlesh</li>
          </div>
        <ul>
    </section>

CSS

button, .button:visited, button, input[type="submit"], input[type="reset"], input[type="button"] {
    font: 14px/24px sans-serif;
    background: #11ABB0 none repeat scroll 0% 0%;
    color: #FFF;
    display: inline-block;
    text-decoration: none;
    padding: 11px 20px;
    margin-top:5px ;
    margin-bottom: 18px;
    border: medium none;
    cursor: pointer;
    height: auto;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.2s ease-in-out 0s;
   
    border-radius: 0px 22px 22px 0;
    float:right;
}
header{
display:inline;    
}
.header-inline{
    display:inline;
    text-transform: capitalize;
    color:#fff;
    text-align:center;
   
}
#headerContent{
    background:#000;
    height:60px;
    top:0;
    width: 100%;
    z-index: 1000;
}
//Sidebar CSS Starts
#sidebar{
    float:left;
    width:20%;
    border:10px;
    background:#17BAC;
    top:55px;
   }

#sidebarControls{
      list-style-type: none;
    text-transform: uppercase;
  letter-spacing: 1.5px;
  float: left;
}
#txtHeader{
   
    vertical-align:middle;
    text-align:center;
}

JavaScript

$("#rightMenu").on