JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<div class="wrapper">
  <div id="header">
    Header
  </div><div id="container">
    Container
  </div><div class="sidebar">
    Sidebar
  </div><div id="footer">
    Footer
  </div>
</div>

CSS

.wrapper {
  margin: 0 auto;
  text-align: left;
  background: #000000;
}

#header {
  width: 100%;
  background: #00FF73;
}

#container {
  width: 60%;
  display: inline-block;
  vertical-align: top;
  background: #FF0004;
}

.sidebar {
  width: 40%;
  display: inline-block;
  background: #0037FF;
}

#footer {
  width: 100%;
  background: #B400F9;
}

div {
  box-sizing:border-box;
}