Reactjs 我如何在不被 destruct 的情况下将导航栏固定在顶部

我在一个投资组合网站上工作，使用react 和tailwind CSS.当我设计导航栏时，我想要它的悬停效果，所以我复制了以下代码的悬停效果:

codepen for hover-effect个

但是一旦我复制了css，我就相应地编辑了我的css.这就是CSS:

.translucent {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.nav{
    color: #fff;
    padding: 15px;
    margin-left: 15px;
    margin-right: 15px;
}

.nav * {
  box-sizing: border-box;
  transition: all .35s ease;
}

.nav li {
  display: inline-block;
  list-style: outside none none;
  margin: .5em 1em;
  padding: 0;
}

.nav a {
  padding: .5em .8em;
  color: rgba(255,255,255,.5);
  position: relative;
  text-decoration: none;
  font-size: 20px;
}

.nav a::before,
.nav a::after {
  content: '';
  height: 14px;
  width: 14px;
  position: absolute;
  transition: all .35s ease;
  opacity: 0;
}

.nav a::before {
  content: '';
  right: 0;
  top: 0;
  border-top: 3px solid #ACDDDE;
  border-right: 3px solid #ACDDDE;
  transform: translate(-100%, 50%);
}

.nav a:after {
  content: '';
  left: 0;
  bottom: 0;
  border-bottom: 3px solid #ACDDDE;
  border-left: 3px solid #ACDDDE;
  transform: translate(100%, -50%)
}

.nav a:hover:before,
.nav a:hover:after{
  transform: translate(0,0);
  opacity: 1;
}

.nav a:hover {
  color: #fff;
}

.nav a:visited {
  color: #fff;
}

这是JSX:

import React from "react";
import "./header.css";
import logo from "../../assets/logo.png";

const Header = () => {
    return (
        <div className="translucent flex justify-between nav items-baseline fixed">
            <div className="h-12 sm:hidden px-6">
                <img src={logo} alt="Harshal Gunjal" />
            </div>
            <div className="text-white text-2xl font-bold hidden sm:block px-6 cursor-pointer">
                Harshal Gunjal
            </div>
            <div className="px-6">
                <ul className="flex items-center justify-center gap-8">
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#home">Home</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#about">About</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#resume">Resume</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    );
};

export default Header;

在应用固定标记之前，导航栏如下所示:

在我将固定标记应用到导航栏之后，它变成了这样:

您可以在GitHub中找到代码:

github source code个

我怎么才能把导航栏固定在上面而不换掉它呢？谢谢你的帮助.

我try 更改css文件中的css，而不是tailwind ‘修正’类，但不起作用.我也试图更改导航中的位置属性，但每次我更改任何内容时，导航栏都会被销毁.