JSFiddle - React, Tailwind, and code Playground
HTML
<section id="footer">
<div class="container">
<div class="row">
<div class="span1">
<div id="small-logo">
<img src="img/small-logo.png" />
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR BOXES</h6>
<ul>
<a href="#"><li>Classic Box</li></a>
<a href="#"><li>Vegetarian Box</li></a>
<a href="#"><li>Family Box</li></a>
<a href="#"><li>Dinner Party Box</li></a>
<a href="#"><li>Gift Box</li></a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR RECIPES</h6>
<ul>
<a href="#"><li>Last Weeks Feature</li></a>
<a href="#"><li>Next Weeks Feature</li></a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>ABOUT US</h6>
<ul>
<a href="#"><li>The Food</li></a>
<a href="#"><li>How We Sourcex</li></a>
<a href="#"><li>Sustainability</li></a>
<li><a href="about.html">About Us</a></li>
<a href="#"><li>Contact Us</li></a>
</ul>
</div>
</div>
<div class="span5">
...
CSS
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
position:fixed;
bottom:0;
width:100%;
}