JSFiddle - React, Tailwind, and code Playground
HTML
<div id="footer">
<section class="footer-top">
<div class="row">
<div class="column small-12">
<nav>
<a>New or Existing Home Installation |</a>
<a href="#">Flushing |</a>
<a href="#">Serivicing |</a>
<a href="#">Service3 |</a>
<a href="#">Service4 |</a>
<a>All Services will be listed here.</a>
</nav>
<div class="thanks">
<div class="thankstext">Thanks our friends at</div>
<img class="footimage" src="footimage.png">
</div>
</div>
</div>
</section>
</div>
CSS
#footer {
background-color: #3f4951;
display:block;
margin:0 auto;
width:100%;
}
section{
display:block;
}
.row {
margin:0 auto;
width:100%;
}
.footer-top{
padding: 37px 0 38px;
}
.column {
padding-left: 20px;
padding-right: 20px;
}
.footer-top nav {
float: left;
margin: 0;
max-width: 60%;
text-align: left;
}
.footer-top nav a {
color:#a9abad;
display: inline-block;
}
.footer-top .thanks {
float:right;
max-width: 35%;
width: 250px;
}
.thankstext {
color:#a9abad;
font-size: 16px;
}
.footer-top* {
color:#a9abad;
}
.footer-top .thanks * {
display: inline-block;
}
.footimage {
}