JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<a href="item.html">
<div class="col-xs-12 col-md-6 col-lg-3 item">
<div class="opacity"></div>
<div class="box_bg">
<h4 class="color1">Headline</h4>
<p>Description</p>
</div>
</div>
</a>
<a href="item.html">
<div class="col-xs-12 col-md-6 col-lg-3 item">
<div class="opacity"></div>
<div class="box_bg">
<h4 class="color1">Headline</h4>
<p>Description</p>
<ul>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
<li>list items</li>
</ul>
</div>
</div>
</a>
</div>
<footer class="bar bar-tab">
<a class="tab-item" href="#">
...
CSS
#content{
min-height: 100%;
padding-bottom:60px;
}
footer{
height: 50px;
position: fixed;
bottom: 0;
background-color: black;
width: 100%;
}