JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="header__navs">
            <a href="#" class="nav__item">Услуги</a>
            <a href="#" class="nav__item">Проекты</a>
            <a href="#" class="nav__item">Компания</a>
            <a href="#" class="nav__item">Контакты</a>
            <a href="#" class="nav__item">Обучение</a>
          </nav>

CSS

.header__navs {
        grid-area: navs;
        display: flex;
        gap: 10px;
        /* justify-self: center;
        align-self: center; */
        font-family: Montserrat;
        font-style: normal;
        font-size: 1em;
        margin: 40px;
        a {
            margin-right: 1.5rem;
            color: #7D8797;
            font-weight: 400;
            margin-bottom: 0rem;
            transition: .3s;
        }
    }
 .nav__item{
   padding: 10px;
   text-decoration: none;
   transition: all 0.25s ease;
 }    
 .nav__item:hover{
   font-weight: 600;
   color: #292930;
   transform: translateY(-10px);
 }