JSFiddle - React, Tailwind, and code Playground

by Can

HTML

<header>
    <h1><img src="_assets/images/b_logoheadertab.png" width="250" height="50" alt="B Logoheadertab"></h1>
        <nav class="main">
            <ul>
                <li class="active"><a href="#">Dashboard</a></li>
                <li><a href="#">Messenger</a></li>
                <li><a href="#">Campaigner</a></li>
                <li><a href="#">Connet API</a></li>
            </ul>
        </nav>
        <div class="login">
          <p>Welcome <a class="link">UserName</a> | <a class="logOutLink" href="#">Log Out</a></p>
        </div>
</header>

CSS

header{
    width:100%;
    height:50px;
    background-color:#184C82;
    border-bottom:1px solid red;
}
header h1{
    float:left;
    width:250px
}
header nav{
    float:left;
    margin:0 15px 0 0;
    color:#fff;
    width:434px;
    height:50px;
}
header nav ul li{
    display:inline;
    margin:0 0 0 2px; line-height:50px;  padding-bottom: 10px;
}
header nav li a{
    text-decoration:none;
    color:#FFF; 
    
    width:45px;
}
header nav li{
    width:45px;
    background:url('../images/nav_active.png') no-repeat;
}
header .login{
    float:right;
}
header nav li:hover, header nav li.active {    
    background:url('http://www.ptt.co.uk/img/RedUpArrow.gif') no-repeat center bottom;
    border-bottom: 1px solid white;
}

JavaScript

$('nav.main ul').on('click', 'li', function(){
    $('nav.main ul li').removeClass('active');
    $(this).addClass('active');
});