JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.2/normalize.css">
<body>
<div id="container">
<div class="featured">
<div class="video-title">
<a href="">Jack</a>
</div>
</div>
<div class="block video-block">
<div class="video-title">
<a href="">Parlor</a>
</div>
</div>
<div class="block video-block">
<div class="video-title">
<a href="">The Campaign</a>
</div></div>
<div class="block video-block">
<div class="video-title">
<a href="">Dead Body</a>
</div>
</div>
<div class="block text-block text-blue left">
</div>
<div class="block text-block text-orange right">
</div>
<div class="block video-block left">
<div class="video-title">
<a href="">Parlor</a>
</div>
</div>
<div class="block video-block">
<div class="video-title">
<a href="">The Campaign</a>
</div></div>
<div class="block video-block right">
<div class="video-title">
<a href="">Dead Body</a>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
CSS
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
#container {
position: relative;
width: 70%;
/*height:100%;*/
min-height: 100%;
height:auto;
overflow: auto;
margin: 0 auto;
background-color:#FFDA8A;
}
.featured {
position: relative;
width: 100%;
height: 50%;
background-color:red;
}
.block {
position: relative;
float: left;
margin: 2%;
margin-top: 3.5%;
margin-bottom: 0;
}
.video-title {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.video-block {
width: 30.66%;
height: 30%;
}
.text-block {
width: 48%;
height: 30%;
}
#footer {
position:relative;
background-color: #393536;
padding: 30px;
height: 150px;
width: 100%;
}