JSFiddle - React, Tailwind, and code Playground

by zakir08

HTML

<header class="header">
        <div class="container">
            <div class="header-wrap">
                <div class="logo">
                    <a href="index.html"><img src="http://demo.thehtmlcoder.net/tutorial-images/logo.png" alt="the htmlcoder"></a>
                </div>
                <!-- /.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>
            <!-- /.header-wrap -->
        </div>
        <!-- /.container -->
    </header>
    <!-- /.header -->

CSS

.header {
    padding: 30px 0;
}

.header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    width: 100%;
    line-break: normal;
    max-width: 33%;
}

.logo img {
    max-width: 100%;
}

.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);
}