JSFiddle - React, Tailwind, and code Playground

by zakir08

HTML

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
</head> 
 <footer class="footer">
        <div class="container">
            <div class="footer-wrap">
                <div class="footer-logo">
                    <img src="http://demo.thehtmlcoder.net/tutorial-images/footer-logo.png" alt="">
                </div>
                <!-- /.footer-logo -->
                <nav class="navigation">
                    <ul class="menu">
                        <li>
                            <a href="#">home</a>
                        </li>
                        <li>
                            <a href="#">about us</a>
                        </li>
                        <li>
                            <a href="#">portfolio</a>
                        </li>
                        <li>
                            <a href="#">blog</a>
                        </li>
                        <li>
                            <a href="#">contact us</a>
                        </li>
                    </ul>
                </nav>
                <!-- /.navigation -->
                <div class="footer-social">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fas fa-globe-europe"></i></a>
                </div>
                <!-- /.footer-social -->
                <div class="copyright">
                   <p>© 2019 - All Right Reserved</p>
                </div>
                <!-- /.copyright -->
            </div>
            <!-- /.footer-wrap -->
        </div>
        <!-- /.container -->
    </footer>
    <!-- /.footer -->

CSS

/* footer wrap  */

.footer{
  background-color: #314584;
  padding: 90px 0 100px;
}

.footer .menu li a {
    color: #fff;
}

.footer .footer-logo {
    text-align: center;
    margin-bottom: 50px;
}

.footer .navigation {
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

.footer-social a {
    font-size: 30px;
    color: #fff;
    margin-right: 50px;
}

.footer-social a:last-child {
    margin-right: 0;
}

.copyright {
    width: 100%;
    text-align: center;
}

.copyright p {
    color: #fff;
}

.navigation {
    width: 100%;
    max-width: 67%;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    list-style-type: none;
}

.menu li {
    padding: 0 25px;
}

.menu li a {
    font-weight: 500;
    color: #314584;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 18px;
    position: relative;
    transition: all .5s ease;
}

.menu li a:before {
    content: " ";
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: -20px;
    left: 0;
    background-color: #ff3946;
    transform: scale(0, 1);
    transition: all .5s ease;
}

.menu li:last-child a {
    padding-right: 0;
}

.menu li a:hover {
    color: #ff3946;
}

.menu li a:hover:before {
    transform: scale(1, 1);
}