JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dashboard-fixed-top">
  <div id="TopHeader">
    <div class="fixed-left">
      <div class="divSearchBox">                    
        <input id="txtInputSearchPeople" placeholder="Search for people"/>
       </div> 
    </div>
    <div class="fixed-right">  
        <a><span>Filters</span></a>
        <a><span>Options</span></a>
        <a><span>Settings</span></a>
        <a><span>Help</span></a>
        <a><span>UserName</span></a>
        <a><span>Logout</span></a>
    </div>
  </div>
</div>
<div id='content'>
</div>

CSS

.dashboard-fixed-top
    {
        background-color: #3b5999;         
        top: 0;
        position: fixed;
        right: 0;
        left: 0;
        z-index: 1030;
        margin-bottom: 0;
        overflow: visible;        
        padding-top: 5px;
        height:32px; 
        max-height:32px;         
    } 

.dashboard-fixed-top:before
    {
        display: table;
        line-height: 0;
        content: "";
    }

.dashboard-fixed-top #TopHeader
    {      
       right: 0;
       left: 0;
       margin-right: auto;
       margin-left: auto;
       width: 1000px; 
       min-width:1000px;       
    }

 .fixed-left
    {
        float:left;        
        margin-top: 3px;
        margin-left:5px; 
    }

.fixed-right
    {
        float:right;        
        margin-top: 5px;        
        text-align:right;        
    }
    
    .fixed-right a
{
      padding-left: 23px;
      margin-right: 12px;
      cursor:pointer;
    }

#content
{
    height:1000px;    
    width:1000px;
}

JavaScript

$(window).scroll(function () {
     $('.dashboard-fixed-top').css('left', 0 - $(this).scrollLeft());
});