JSFiddle - React, Tailwind, and code Playground

by Naveen Ravichandran

HTML

<div class = 'component'>

<div class='header'>
Header
</div>
<div class ='container'> 
<div class='a'>
left
</div>
<div class= 'a'>
right
</div>
</div>
<div class='footer'>
Header
</div>
</div>

CSS

.header {
  position:static;
  top:0;
  background-color:yellow;
  width:100%;
  height:10%;
}

.footer {
  position:static;
  bottom:0;
  background-color:yellow;
  width:100%;
  height:10%;
}
.a {
  height:100%;
  width:50%;
  float:left;
  background:red;
}

.container {
  position:absolute;
  top:10%;
  height:80%;
  width:100%;
}


@media only screen and (max-width: 500px) {
  .a {
 width:100%;
  }
}