JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<div id="navBar">
  <ul>
    <li>Lifestyle</li>
    <li>Science</li>
    <li>Tech</li>
    <li>Strange</li>
    <li>Entertainment</li>
    <li>Society</li>
  </ul>
</div>

CSS

#navBar {
  width: 100%;
  height: 40px;
  background-color: #1D70B7;
  clear: both;
  margin-top: 20px;
  position: relative;
}

#navBar ul {
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  margin: 0 auto;
  line-height: 40px;
}

#navBar li {
  display: inline;
  color: white;
  font-size: 20px;
  margin-left: 35px;
  font-family: sans-serif;
}