JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top-bar">Lorem ipsum dolor sit amet</div>
<header class="main-bar">
  <div class="main-bar__logo">Logo</div>
  <ul class="main-bar__nav">
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
  </ul>
</header>
<div class="promo-bar">Lorem ipsum dolor sit amet consecur bla bla bla</div>
  
<div class="page-content"></div>

SCSS

body {
  margin: 0;
}

.page-content {
  min-height: 200vh;
}

.top-bar {
  background: blue;
  color: white;
  padding: 5px 20px;
  text-align: center;
}

.main-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
  position: sticky;
  top: 0;
  background-color: grey;
  
  &__nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 0;

    li{
      margin: 0 0 0 10px;
    }
  }
}

.promo-bar {
  background: red;
  color: white;
  padding: 5px 20px;
  text-align: center;
}