JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">

  <div class="sub_header_01">
  This is a webpage
  </div>

  <div class="sub_header_02">

    <div class="image">
    Image
    </div>	
  
    <div class="navigation">
  
      <div class="navigation_button">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      </div>

    </div>
  
  </div>

</div>

<div class="content">
<p>Am no an listening depending up believing. Enough around remove to barton agreed regret in or it. Advantage mr estimable be commanded provision. Year well shot deny shew come now had. Shall downs stand marry taken his for out. Do related mr account brandon an up. Wrong for never ready ham these witty him. Our compass see age uncivil matters weather forbade her minutes. Ready how but truth son new under. Breakfast procuring nay end happiness allowance assurance frankness. Met simplicity nor difficulty unreserved who. Entreaties mr conviction dissimilar me astonished estimating cultivated. On no applauded exquisite my additions. Pronounce add boy estimable nay suspected. You sudden nay elinor thirty esteem temper. Quiet leave shy you gay off asked large style. Betrayed cheerful declared end and. Questions we additions is extremely incommode. Next half add call them eat face. Age lived smile six defer bed their few. Had admitting concluded too behaviour him she. Of death to or to being other. Received shutters expenses ye he pleasant. Drift as blind above at up. No up simple county stairs do should praise as. Drawings sir gay together landlord had law smallest. Formerly welcomed attended declared met say unlocked. Jennings outlived no dwelling denoting in peculiar as he believed. Behaviour excellent middleton be as it curiosity departure ourselves. On then sake home is am leaf. Of suspicion do departure at extremely he believing. Do know said mind do rent they oh hope of. General enquire picture letters garrets on offices of no on. Say one hearing between excited evening all...

CSS

body {
  margin: 0;
}


.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  position: fixed;
  top: 0;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.sub_header_01 {
  width: 100%;
  height: 100%;
  float: left;
  text-align: center;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;   
}

.sub_header_02 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  float: left;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}


.image {
  width: 30%;
  height: 100%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}


/* Navigation */

.navigation {
  width: 70%;
  height: 100%;
  position: relative; 
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: aqua;
}

.navigation_button {
 width: 20%;
 height: 100%;
 float: right;
 cursor: pointer;
 
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: fuchsia;
}

.bar1, .bar2, .bar3 {
 width: 100%;
 height: 20%;
 margin: 4% 0;
 background-color: #333; 
}



/* Content */

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}