JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
 <div id="grad1" class="jumbotron" style="padding: 13px 0px !important;">
       
         <div class="row">
             <div class="col-lg-6 col-md-6 navbar-left">
                 <img src="img/logo.png" alt=""/>
             </div>
             <div class="col-lg-6 col-md-6 text-right">
                 <a href="#" style="text-decoration: underline;">Bienvenue Mr XXXXXXX</a>
             </div>
         </div>
              <div class="col-lg-12">                                                    <!-- menu horizontal-->
          <nav class="navbar">
           
         <ul class="nav nav-tabs nav-tabs-justified ">
             <li class="active" ><a href="index.html">Accueil</a></li>
             <li><a  href="machines.html">machines</a></li>
             <li><a href="message.html">Messages</a></li>
             <li><a href="log-in.html">Se D&eacute;connecter</a></li>
         </ul>
          
                 </nav>
</div>
 </div>
 </div>

CSS

.container{margin:auto 0;
           width: 100%;
           }
            
           #grad1 {
               /* height: 200px;*/
           background-image: -moz-linear-gradient( -90deg, rgb(215,215,215) 0%, rgb(235,235,235) 9%, rgb(255,255,255) 61%);
           background-image: -webkit-linear-gradient( -90deg, rgb(215,215,215) 0%, rgb(235,235,235) 9%, rgb(255,255,255) 61%);
           background-image: -ms-linear-gradient( -90deg, rgb(215,215,215) 0%, rgb(235,235,235) 9%, rgb(255,255,255) 61%);
           background: linear-gradient(rgb(235,235,235),rgb(255,255,255)); /* Standard syntax (must be last) */
           }
           .navbar{
           width: 50%;
           margin:0 auto;
           text-align: center;  
           }

.navbar ul {
    list-style:none;
    font-size:0px;
}

.navbar ul li {
    display:inline;
    margin-right:15px;
}

.navbar ul li a {
    text-decoration:none;
    font-size:14px;
}