JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="gnav">
  <li class="current"><a href="#">mein</a></li> 　　
  <li><a href="#">ご案内</a></li>
  <li><a href="#"> 料金</a></li>　　
  <li><a href="#">アクセス</a></li>
  <li><a href="#">アプリ</a></li>
</ul>　

CSS

.gnav {
  display: flex;
  justify-content: flex-end;
  text-align: center;
  margin-right: -20px;
  font-size: 0;
  align-items: center;
}

.gnav li {
  font-size: 12pt;
  line-height: 1;
  height: 40px;
  width: 120px;
  background-color: #fff;
  border-radius: 15px;
  margin-right: 20px;
  display: inline-block;
  position: relative;
  transition: all 0.5s;
  border: 1px solid #5a5454;
  cursor: pointer;
}

.gnav li:hover,
.gnav li.current {
  background-color: #ef5e69;
}

.gnav li:hover a,
.gnav li.current a {
  color: #fff;
}

.gnav li a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  text-decoration: none;
  color: hsl(0, 1%, 40%);
}

JavaScript

const navItems = document.querySelectorAll(".gnav li");

for (const navItem of navItems) {
  navItem.addEventListener("click", (event) => {
    for (const navItem of navItems) {
      navItem.classList.remove("current");
    }
    
    event.currentTarget.classList.add("current");
  })
}