JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <nav class="navbar navbar-expand-lg fixed-top navbarScroll">
        <div class="container">
          <!  <a class="navbar-brand" href="#">insertgenericnamehere</a> -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#home">Home</a></li>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#About">About</a></li>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">UX/UI</a></li>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Portfolio">Portfolio</a></li>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a></li>
                    </li>
                </ul>

            </div>
        </div>
    </nav>
    
    
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dd
<div id="Portfolio">
portfolio
</div>

CSS

ul {
  list-style-type: none;
}

 {
  position: fixed;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  list-style-type: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #04AA6D;
}