JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
   <div class="navbar navbar-fixed-top" role="navigation">
                <ul class="mobile-nav">
                    <li>
                        <a href="#" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                            <i class="fa fa-bars" aria-hidden="true"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" type="button"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="true">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </a>
                    </li>
                    <li>&nbsp;</li>
                    <li><a href="#"><i class="fa fa-language" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-heart" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i></a></li>
                </ul>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">Career advice</a></li>
                        <li><a href="#">Career advice</a></li>
                    </ul>
                </div>
                <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2" aria-expanded="true"> 
                    <form class="navbar-form navbar-left" role="search"> <div class="form-group"> 
                        <input type="text" class="form-control"...

SCSS

.mobile-logo {
    background: rgba(0, 0, 0, 1);
    display: block;
}

.mobile-nav {
    width: 100%;
    padding: 0;
    display: block;
    margin-top: 58px;
    li{
        width: calc(100% / 6);
        float: left;
        background: #555;
        text-align: center;
        padding: 10px 0;
        border-left: 1px solid #333;
        &:nth-child(1) {
            border:none;
        }
        &:nth-child(3) {
            height: 38px;
        }
        a{
            font-size: 18px;
            color: #fff;  
        }
    }
}

.navbar-collapse {
    li {
        &:nth-child(odd) {
            background: #555
        }
        &:nth-child(even) {
            background: #444
        }
    }
    .navbar-nav {
        margin: 0 -15px;
        a {
            color: #fff;
            border-bottom: 1px solid #333;
        }
    }
}