JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <button class="navbar-toggler pull-xs-left hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar-collapse">&#9776;</button>
        <div class="container-fluid" name="Section0" style="padding: 0px !important">
            <div class="row headerWrapper" name="Section1" style="width: 100%">

                        <div class="col-lg-12 col-md-12" style="padding:0em !important;margin: 0 !important;">
                                        <div class="navbar-header col-lg-10 col-md-10" style="display: inline-block;padding: 0em !important">
                        
                                                 <ul class="nav navbar-nav pull-xs-right">
                                                                <h1 class="navbar-brand logoStyle">vTM</h1>
                                                         <li class="nav-item">
                                                                 <a class="navbar-brand dashboard"   routerLink="/dashboard" routerLinkActive="active">
                                                                </a>
                                                         </li>
                                                         <li class="nav-item">
                                                                <a class="navbar-brand worklist" routerLink="/worklist" routerLinkActive="active"></a>
                                                        </li>
                                                        <li class="nav-item">
                                                               <a class="navbar-brand userhistory" routerLink="/userhistory"...

CSS

/* 

ul li, ul h1 {
    padding-top: 5px;
}

.navbar-brand {
        color: #fff;
        text-shadow: none;
        height: 50px;
        z-index: 999;
        cursor: default;
        margin: -3px 0px 0px -2px!important;
        padding-left: 10 !important;
        font-size: 25px;
}

.nav-item {
    line-height: 1em;
} */

 .navbar {
    height: auto;
    padding: 0px;

} 
.logoStyle {
    background-image: url(../../assets/images/logo.png);
    background-position: -15px 6px;
    background-repeat: no-repeat;
    background-size: auto 40px;
    margin-left: 18px ;
    padding: 11px 0 0 30px;
    height: 43px !important;
    }

    .active{
        text-decoration: underline;
    }

.navbar-brand {
    margin-right: 10px !important;    
}
.nav-item {
    margin-top: 5px;
}

.logout{
    background-image: url(../../assets/images/logo.png);
    float: right;
    height: 30px;
    width: 40px;
}

.dashboard {
    background-image: url(../../assets/images/dashactive.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.worklist {
    background-image: url(../../assets/images/worklist.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.userhistory {
    background-image: url(../../assets/images/tickets.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.user {
    background-image: url(../../assets/images/user.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.help {
    background-image: url(../../assets/images/help.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.logout {
    background-image: url(../../assets/images/logout.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

 .user-logged span {
    color:...