JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
  <nav>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Our Products</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Login</a></li>
 </nav>
    
   <div id="header">
        <h1>CSS Newbie: Super Simple Horizontal Navigation Bar</h1>
    </div>
   
   <div id="content">
      
      <p> Basic Fixed Nav at Top</p>
       <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel ante eget sem congue fringilla. Donec porttitor tortor ac erat eleifend laoreet eget at dolor. Nullam aliquet lorem ut quam auctor a vehicula arcu egestas. Integer ac libero ipsum. Suspendisse sodales augue nec purus tincidunt sed scelerisque sem posuere. Etiam adipiscing ligula nec nisi pellentesque mattis molestie lacus consequat. Praesent viverra nulla eu urna fermentum eget laoreet purus ornare. Nullam tempor scelerisque odio quis dignissim. Nullam at massa quis augue suscipit feugiat sed ac tortor. Fusce non lorem augue, in pretium nisi. Integer auctor venenatis lacus semper blandit. Maecenas placerat vestibulum nunc, quis lobortis tortor scelerisque sit amet. Proin porta urna eget metus fringilla tristique. Maecenas nec erat et tortor ultricies lacinia.

Nam sapien velit, tincidunt ac egestas ut, iaculis in metus. Nam blandit pellentesque eros. Nunc dui dolor, tincidunt sed rhoncus nec, commodo vitae ipsum. Vivamus posuere molestie sapien, ac tincidunt risus suscipit non. Praesent sagittis consectetur convallis. In quam sapien, elementum ut tempus eu, porta a est. Etiam porttitor vulputate velit quis malesuada. Nam et enim velit, non venenatis massa. Vivamus sed turpis vel tellus porta dictum. Maecenas varius lacinia turpis, ut pellentesque ligula interdum vel. Aliquam ac malesuada nulla.

Duis sed dolor neque, eu mollis sapien. Aliquam erat volutpat. Morbi faucibus, magna nec ultrices vestibulum, velit nisi feugiat magna, eu consequat lectus enim feugiat urna. Vestibulum nec...

CSS

nav {
    width: 100%;
    float: left;
    margin: 0 0 15px 0;
    padding: 0px;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc; 
    position:fixed;
    top:0px;
}
nav li {float: left; }
nav li a {
    display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      border-right: 1px solid #ccc; }
nav li a:hover {
      color: #c00;
      background-color: #fff; }
   /* End navigation bar styling. */
   
   /* This is just styling for this specific page. */
body {
      background-color: #555; 
      font: small/1.3 Arial, Helvetica, sans-serif; }
#wrap {
      width: 750px;
      margin: 0 auto;
      background-color: #fff; }
h1 {
      font-size: 1.5em;
      padding: 1em 8px;
      color: #333;
      background-color: #069;
      margin: 30px auto 0;
}
#content {
      padding: 0 50px 50px; }