JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mobile-12 decktop-12 cnt-top column">
  Content top
</div>
<div class="mobile-12 decktop-8 cnt column">
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
  <br /> <br />
  Content - main
</div>
<div class="mobile-12 decktop-4 cnt-right column">
  Content - right
</div>
<div class="mobile-12 decktop-12 cnt-bottom column">
  Content bottom
</div>

CSS

.column {
  display: block;
  min-height: 50px;
  background-color: #ccc;  
  text-align: center;
  float: left;
}

.decktop-12 {
  width: 100%;
}

.decktop-8 {
  width: 66%;
}

.decktop-4 {
  width: 33%;
}

.cnt {
  background-color: #995595;
}

.cnt-right {
  background-color: #559959;
}