JSFiddle - React, Tailwind, and code Playground

HTML

<footer class="footer">
        <div class="container">
            <div class="menu-wrapper">
                <div class="menu">
                    <ul>
                        <h6 class="peasant">Explore</h6>
                        <li><a href="#">Our Philosophy</a></li>
                    </ul>
                </div>
                <div class="menu">
                    <ul>
                        <h6 class="peasant">Services</h6>
                        <li><a href="#">Offers</a></li>
                        <li><a href="#">Work</a></li>
                    </ul>
                </div>
                <div class="menu">
                    <ul>
                        <h6 class="peasant">Contact</h6>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
                <div class="menu">
                    <ul>
                        <h6 class="peasant">Journal</h6>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

CSS

footer.footer {
    height: 500px;
    width: 100%;
    background-color: #f8f8f8;
}
.menu {
    width: 25%;
    display: inline-block;
    vertical-align: top;
}
.footer .menu ul {
    padding: 0;
}