JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<script src="https://unpkg.com/[email protected]/dist/main.js"></script>
<section id="firstpage">
  <ul>
    <li><a class="active" href="#firstpage">HOME</a></li>
    <li><a href="#how-works">HOW IT WORKS</a></li>
    <li><a href="#why-us">WHY CHOOSE US</a></li>
    <li class="midlogo">
      <a href="#firstpage"></a>
    </li>
    <li><a href="#gallery">GALLERY</a></li>
    <li><a href="#services">SERVICES</a></li>
    <li><a href="#contact">CONTACT US</a></li>
  </ul>
</section>

CSS

#firstpage ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

#firstpage li {
  width: 100%;
}
#firstpage li:nth-child(odd) {
  background: pink;
}

#firstpage li a {
  display: block;
  text-align: center;
  color: white;
  padding: 33px 19px;
  text-decoration: none;
  font-family: Futura;
  font-size: 11px;
}

#firstpage li a:hover {
  color: #00CFFF;
}

#firstpage .active {
  color: #00CFFF;
}

#firstpage .midlogo {
  border: white dashed 3px;
  width: 50px;
  flex-shrink: 0;
  height: 50px;
}