JSFiddle - React, Tailwind, and code Playground

by profesor08

HTML

<ul class="pseudo">
  <li>
    <div><a href="#1234">Пиломатериалы</a></div>
  </li>
  <li>
    <div><a href="#1234">Погонажные изделия</a></div>
  </li>
  <li>
    <div><a href="#1234">Стройматериалы</a></div>
  </li>
  <li>
    <div><a href="#1234">Метизы</a></div>
  </li>
</ul>

CSS

ul {
  font-family: PT_Sans;
  font-weight: 400;
  font-size: 18px;
  display: inline-block;
  padding: 0;
}

div {
  display: inline-block;
  padding: 10px 10px;
}

div:hover {
  background: #36b336;
}

a {
  text-decoration: none;
  color: #000;
  border-bottom: 1px dashed #b2a899;
}

a:hover {
  color: #fff;
  border-bottom: 1px dashed #96d296;
}