JSFiddle - React, Tailwind, and code Playground
HTML
<div class="page">
<div class="bgood-footer">
<a href="/mobile-app">
<div class="mobile-app">Mobile Application</div>
</a>
<a href="/talk-to-us">
<div class="talk">Talk To Us</div>
</a>
<a href="/careers">
<div class="careers">Careers</div>
</a>
<a href="/press">
<div class="press">Press</div>
</a>
<div class="blank"></div>
<a href="https://www.facebook.com/bgood">
<div class="fb">FB</div>
</a>
<a href="https://www.youtube.com/user/unclefaris">
<div class="yt">YT</div>
</a>
<a href="https://twitter.com/b_good_">
<div class="tw">TW</div>
</a>
<a href="https://twitter.com/b_good_">
<div class="ig">IG</div>
</a>
<div class="ordering-loc">Ordering From Location</div>
</div>
</div>
CSS
.page {
height: 100%;
width: 100%;
text-align: center;
}
.bgood-footer {
width: 100%;
height: 20%;
position: fixed;
bottom: 0;
}
a, .blank, .ordering-loc{
display: inline-block;
background-repeat: no-repeat;
}
.mobile-app {
background-image: url('../images-source/mobile-app.png');
}
.talk {
background-image: url('../images-source/talk-to-us.png');
}
.careers {
background-image: url('../images-source/careers.png');
}
.press {
background-image: url('../images-source/press.png');
}
.blank {
background-image: url('../images-source/blank.png');
}
.fb {
background-image: url('../images-source/fb.png');
}
.yt {
background-image: url('../images-source/yt.png');
}
.tw {
background-image: url('../images-source/tw.png');
}
.ig {
background-image: url('../images-source/ig.png');
}
.ordering-loc {
background-image: url('../images-source/ordering-loc.png');
}