JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<div class="container">
    <div class="footer">
        <div class="row menu">
            <div class="col-md-6">
                <ul class="left-side footer-menu">
                    <li class="right-spacer left-remove">FEATURES</li>
                    <li class="right-spacer">BLOG</li>
                    <li class="right-spacer">ABOUT</li>
                    <li class="right-spacer">CONTACT</li>
                </ul>
            </div>
            <div class="col-md-6">
                <ul class="right-side footer-menu">
                    <li class="left-spacer">PRIVACY</li>
                    <li class="left-spacer">TERMS</li>
                    <li class="left-spacer">VIDEO</li>
                    <li class="left-spacer">SLIDE SHARE</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.footer {
     width: 100%;
     border-top: 4px solid #d3d3d3;
 }
 .footer .menu {
     font-size: 15px;
 }
 .footer .footer-menu li {
     list-style-type: none;
     display: inline;
 }
 .footer .left-side li {
     float: left;
 }
 .footer .right-side li {
     float: right;
 }
 .left-spacer {
     padding-left: 58px;
 }
 .right-spacer {
     padding-right: 58px;
 }
ul {
    padding: 0;
}