JSFiddle - React, Tailwind, and code Playground

HTML

<!-- section-1 -->

    <div class="section-1">

        <div class="navbar">

            <a href="#" class="navbar-link">Design</a>

            <a href="#" class="navbar-link">Customers</a>

            <a href="#" class="navbar-link">Team</a>

            <a href="#" class="navbar-link">Contact</a>

        </div>

        <div class="floating-bg"></div>

        <div class="logo">

            <!-- i.fa-bezier-curve -->

        </div>

    </div>

CSS

.navbar{

    position: relative;

    display: flex;

    justify-content: center;

    z-index: 20;
    
    background-color: cyan;

}

.navbar a{

    color: gray;

    margin: 20px 50px;

    font-weight: bold;

    font-size: 20px;

    word-wrap: break-word;

    width: 1%;

    letter-spacing: 3px;

    padding: 5px;

    transition-duration: 1s;

}


.navbar a:hover{
  width: auto;
}