JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<div id="container">
    <div id="header"></div>
    <div id="main" class="portrait">
        <div id="queue"></div>
        <div id="ads"></div>
    </div>
</div>

CSS

*{
    box-sizing:border-box;
}
#container {
  width: 100%;
  height: 100%;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  display: inline-block;
}

/* HEADER */
#header {
  width: 100%;
  height: 70px;
  position: relative;
  background: #ed1c24;
  padding: 20px 0;
}

/* MAIN */
#main {
  width: 100%;
  height: calc(100% - 70px);
  position: relative;
  text-align: center;
}

/* MAIN LANDSCAPE */
#main.landscape {
  display: inline-block;
}

#main.landscape #queue {
  width: 75%;
  height: 100%;
  float: left;
}

/* MAIN PORTRAIT */
#main.portrait {
  display: block;
}

#main.portrait #queue {
  width: 100%;
  height: 75%;
}

/* LANDSCAPE ADS */
#main.landscape #ads {
  width: 25%;
  height: 100%;
  float: right;
  background: #000;
}

/* PORTRAIT ADS */
#main.portrait #ads {
  width: 100%;
  height: 25%;
  background: #000;
}