JSFiddle - React, Tailwind, and code Playground

HTML

<header>
      <nav class="desktop-nav">
        <ul class="item-list">
          <li class="item active">
            <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Home</a>
          </li>
          <li class="item">
            <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Newest</a>
          </li>
          <li class="item">
            <a href="#projects" data-scroll>Most Popular</a>
          </li>
          <li class="item">
            <a href="#projects" data-scroll>Categories</a>
          </li>
          <li class="item">
            <a href="#blog" data-scroll>Stash</a>
          </li>
          <li class="item">
            <a href="#">Contact</a>
          </li>
          <li class="item" onclick="showSearch();">
            <a href="#">Search</a>
          </li>
        </ul>
      </nav>
    </header>

CSS

.item-list {
	display: flex;
  margin: 0 auto;
}

.item {
  margin-left: 10px;
	list-style: none;
}

.item a {
	color: #37302b;
	font-size: 20px;
}

header {
	position: inherit;
	height: 50px;
}