JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="footer">
    <nav class='footer-nav'>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="careers.html">Careers</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
    <span>Website Designed by <a class='mac' href='https://machooper.com'>Mac Hooper</a></span>
    <span>Copyright &copy Vegan Restaraunt</span>
</div>

CSS

.footer{
    margin-top: auto;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    margin: 0 auto;
    align-items: center;
    background: #000000;
    color: #fff;
   
  
}
.footer-nav a{
    font-size: 16px;
    text-decoration: none;
    color:#fff;
    position: relative;
}
.mac{
    text-decoration: none;
    color: #fff;
}