JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="container">

<header>
<div class="top_bar">
<div class="top_menu">

<div class="logo">
<img src="img/bbc-blocks-light.png" alt="logo"/>
</div>
<div class="sign_in">
<img src="img/sign.PNG" alt="sign_in"/>
<a href="#">Sign In</a>
</div>

<div class="menu">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Earth</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Capital</a></li>
<li><a href="#">Culture</a></li>
<li><a href="#">Autos</a></li>
</ul>
<!--
<div class="more">More</div>
</div> -->
</div>
</div>
</div>
</header>
</div><!--closing container-->
</body>

CSS

body {
background-color: lightblue;
padding:0;
margin:0;
font-family:"Arial Black", Gadget, sans-serif;
}

.top_bar{
width: 100%;
background-color: #000000;
height: 35px;
}

.top_menu{
max-width: 1366px;
width:93%;
height: 35px;
margin: 0 auto;
font-size: 11.3px;
font-weight: bold;


}

.logo{
float:left;
padding-top: 5px;
padding-right: 18px;
border-right: 1px solid #636363;

}

.sign_in{
float:left;
border-right: 1px solid #636363;
width:162px;

}

.sign_in img{
float:left;
margin:5px 3px auto 7px;

}

.sign_in a{
float:left;
margin-top: 10px;

}

.menu{
float:left;
}

.menu li{
float:left;
list-style: none;
border-right: 1px solid #636363;
padding: 0 20px;

}

.top_menu a{
text-decoration: none;
color:#ffffff;
}