JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="demonstration.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
    <title>Demo</title>
</head>
<body>
   
   <div id="topbar">
       
       <div id="leftTopbar">
           
       </div>
       
       <div id="rightTopbar">
           <ul>
               <li>Plugins</li>
               <li>Contribute</li>
               <li>Events</li>
               <li>Support</li>
               <li>JS Foundation</li>
               <li></li>
           </ul>
       </div>
       
   </div>
   <div id="logoDiv">
        <img id="jqueryLogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/JQuery_logo_text.svg/2000px-JQuery_logo_text.svg.png" alt="" >
   </div>
   
   
   <div id="header" class="container">
       
       <ul>
           <li>Download</li>
           <li>API Documentation</li>
           <li>Blog</li>
           <li>Plugins</li>
           <li>Browser Support</li>
       </ul>
       
   </div>
   
   <div id="hero" class="container">
       
       <div id="hero-container">
           
           <p>This is a paragraph</p>
           
       </div>
   </div>
    
</body>
</html>

CSS

body{
    background: #0769AD;
    margin: 0;
    padding: 0;
    font-family: 'Teko', sans-serif;
}

.container{
    width: 96%;
    margin: 0 auto;
}

/*vvv TOPBAR vvv*/

#topbar{
    height: 30px;
    width: 100%;
    background: linear-gradient(#494949, #272727);
}

#leftTopbar{
    float: left;
}

#rightTopbar{
    float: right;
}

#rightTopbar > ul{
    list-style-type: none;
    display: inline-block;
    font-family: 'Helvetica', sans-serif;
    margin: 0;
}

#rightTopbar > ul > li{
    color: white;
    float: left;
    padding: 0px 12px 0px 12px;
    height: 30px;
    line-height: 30px;
    border-left: 1px solid #2e2e2e;
    font-size: 14px;
}

#rightTopbar > ul > li:hover{
   background-color: #242424;
}

/*vvv LOGO IMAGE vvv*/

#logoDiv{
    width: 96%;
    margin: 40px auto 40px auto;
}

#jqueryLogo{
    height: 60px;
    padding: 0;
    margin-left: 10px;
    display: block;
}

/*vvv HEADER BELOW vvv*/

#header{
    height: 50px;
    background-color: #05568D;
    border-radius: 10px 10px 0px 0px;
    position: relative;
}

#header > ul{
    list-style-type: none;
    padding: 0px 20px 0px 20px;
    margin: 0px;
    background-color:darkmagenta;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#header > ul > li{
    padding: 0px 10px 0px 10px;
    color: white;
    font-size: 20px;
    float: left;
    background-color: red;
}

#hero{
    background-color: white;
    border-radius: 0px 0px 10px 10px;
}

#hero-container{
    margin: 0px 100px 0px 100px;
    background-color: red;
}