JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
 
  <div class="preHeaderContent">
  <a href="#">Gift Card
  <span class="superNew">New</span></a>
  <a href="#">Track Orders</a>
  <a href="#">Contact Us</a>
  
 </div>
 <div class="headerContent">
 <div class="logoContainer">
 <a href="/" class="myntraweb-sprite logoContainer spritesLogo"></a>
 </div>
 <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  </div>
 </div>

CSS

.header{    
    color: #fff;
    top: 0;
    position: fixed;
    right: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.preHeaderContent{
    text-align: right;
    max-width: 980px;
    margin: auto;
    font-size: 12px;
}


.preHeaderContent a{
    text-decoration: none;
    color: #526cd0;
    display: inline-block;
    padding: 8px 0;
    font-weight: 500;
    font-size: 11px;
    
}
.preHeaderContent a:last-child:after{
  content: "";
}

.preHeaderContent a:after{

    content: "\A0 \A0 | \A0 \A0 \A0";
    color: #e9e9ed;
    padding: 0 10px;
}
.superNew {
  padding:0 5px 1px;
  background:transparent!important;
  border:1px solid #f16565 !important;
  border-radius:90px;
  color:#f16565;
  font-weight:900;
  margin:0 0 0 5px;
  font-size:10px;
}
.headerContent{
  margin:auto;
  min-width:980px;
  max-width:980px;
  line-height:80px;
}
.logoContainer{
  display:inline-block;
  margin-top:20px;
  vertical-align:middle;
  padding:0;
  margin:0;
  cursor:pointer;
}
.spritesLogo{
  width: 112px;
  height:40px;
  
   background-position:-426px 0;
   
}
.myntraweb-sprite {
  background:url(https://png.icons8.com/windows/50/000000/toucan.png);
 background-repeat: no-repeat;
 background-position: center; 
}