JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
 <li class="nav__item nav__item--green">пункт номер1</li>
 <li class="nav__item nav__item--yellow">пункт пункт меню 2</li>
 <li class="nav__item nav__item--red">пункт  3</li>

</ul>

SCSS

.nav {
  display: flex;
  list-style: none;
  
  &__item {
    display: block;
    flex-basis: 100%;
    text-align: center;
    padding: 1rem 1.2rem;
    cursor: pointer;
    &--green {
        background-color: green;
        &:hover {
          background-color: chartreuse;
        }
      }     

      &--yellow {
        background-color: yellow;
        &:hover {
          background-color: darkgoldenrod;
        }
      }    

      &--red {
        background-color: red;
        &:hover {
          background-color: tomato;
        }
      }

      
  }
  
}

@media (max-width: 576px) {
  .nav {
    flex-direction: column;
  }
  
   }