JSFiddle - React, Tailwind, and code Playground

by kaktusvit

HTML

<ul class="menu sf-menu">
				
<li class="page_item page-item-9">меню</li>
<li class="page_item page-item-11">меню2</li>
<li class="page_item page-item-13">меню3</li>
</ul>

CSS

.menu {
  display: flex;
  list-style: none;
  font-weight: bold;
}
.page_item {
  display: block;
  flex-basis: 100%;
  text-align: center;
  padding: 1rem 1.2rem;
  cursor: pointer;
  margin:7px;
}
.page-item-9 {
  background-color: green;
}
.page-item-9:hover {
  background-color: chartreuse;
}
.page-item-11 {
  background-color: yellow;
}
.page-item-11:hover {
  background-color: darkgoldenrod;
}
.page-item-13 {
  background-color: red;
}
.page-item-13:hover {
  background-color: tomato;
}

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