JSFiddle - React, Tailwind, and code Playground

by Kondal Durgam

HTML

<body>
  <div class="header">
      lorepum Ipsumlorepum Ipsumlorepum Ipsumlorepum Ipsumlorepum Ipsumlorepum Ipsum
  </div>
  <div class="section">
      <div class="nav">
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      
      </div>
      <div class="aside">
          lorepum Ipsumlorepum Ipsumlorepum Ipsumlorepum Ipsumlorepum Ipsumlorepum Ipsum
      </div>
  </div>
  <div class="footer">
    footer
  </div>
</body>

CSS

body{
background:#ccc;
}

.header{
  background-color: #666;
    padding: 30px;
    text-align: center;
    font-size: 35px;
    color: white;
}
.nav{
  background:green;
  width:30%;
  float:left;
  height:200px;
}
.nav, ul{
  list-style:none;
}
.aside{
  width:70%;
  float:left;
  height:200px;
  background:gray;
}
.footer{
  background:blue;
  text-align:centre;
   padding: 30px;
    text-align: center;
    font-size: 35px;
    color: white;
}
.section:after {
    content: "";
    clear: both;
    display: table;
}