JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
  <ul>
  <li><a href="">Menu1</a></li>
  <li><a href="">Menu1</a></li>
  <li><a href="">Menu1</a></li>
  <li><a href="">Menu1</a></li>
  </ul>
</div>



<br><br><br><br><br>
<p>
try scrolling
</p>

CSS

body {
  height: 1000px;
  margin: 0;
  padding: 0
}

.header {
  width: 100%;
  border: solid 1px #fff;
  position: fixed;
  top: 0;
}

ul {
  border: solid 1px #f00;
  list-style-type: none;
  overflow: hidden;
}

li {
  width: 25%;
  float: left;
}