JSFiddle - React, Tailwind, and code Playground

by Shannenpio Cloning

HTML

<div class="wrapper">
<header class="header">Header</header>
<div style="clear:both;"></div>
<div class="container">
  <div class="konten">Konten</div>
  <div class="sidebar-kiri">Sidebar-Kiri</div>
  <div class="sidebar-kanan">Sidebar-Kanan</div>
</div>
<div style="clear:both;"></div>
<footer class="footer">Footer</footer>
</div>

CSS

*{box-sizing:border-box;}
.wrapper{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  color:#fff;
}
.header,.footer{widht:100%;height:120px;}
.header{
  background:grey;
}
.footer{
  background:grey;
  margin-top:auto;
}
.container{
  width:100%;
  height:100%;
  position: relative;
  display:flex;
  flex-direction:column;
  align-content:stretch;
  flex-flow: row wrap;
  flex-grow:1;
}
.sidebar-kiri,.konten,.sidebar-kanan,.header,.footer{padding:20px;}
.konten{
  background:#7ac943;
  flex-grow:1;
  width:100%;
}
.sidebar-kiri{
  background:#3fa9f5;
  width:100%;
}
.sidebar-kanan{
  flex-shrink:10;
  background:#ff931e;
  width:100%;
}
/*3 Column Layout*/
@media only screen and (min-width: 800px) {
  .container{
    flex-direction:row;
  }
  .konten{
    width:50%;
    /*position*/
    order:2;
  }
  .sidebar-kiri{
    width:25%;
    /*position*/
    order:1;
  }
  .sidebar-kanan{
    width:25%;
    /*position*/
    order:2;
  }
}
@media only screen and (min-width: 580px) and (max-width:799px) {
  .container{
    display:flex;
  }
  .konten{
    flex-grow:1;
  }
  .sidebar-kiri{
    width:50%;
 
  }
  .sidebar-kanan{
    width:50%;
  }
}