JSFiddle - React, Tailwind, and code Playground

by kaktusvit

HTML

<ul class="menu sf-menu">
				<li class="page_item page-item-7 current-menu-item"><a href="http://test3/">О себе</a></li>
<li class="page_item page-item-9"><a href="http://test3/stati">Статьи</a></li>
<li class="page_item page-item-11"><a href="http://test3/vopros-otvet">Вопрос-ответ</a></li>
<li class="page_item page-item-13"><a href="http://test3/kontakty">Контакты</a></li>
			</ul>

CSS

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

      &page-item-11 {
        background-color: yellow;
        &:hover {
          background-color: darkgoldenrod;
        }
      }    

      &page-item-13 {
        background-color: red;
        &:hover {
          background-color: tomato;
        }
      }

      
  }
  
}

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