JSFiddle - React, Tailwind, and code Playground

by Axiniya

HTML

<ul class="martial-arts-list"><a class="martial-arts-list-current" href="">Единоборства</a>
  <li><a href="">Бокс</a></li>
  <li><a href="">Бразильское джиу-джитсу</a></li>
  <li><a href="">Грепплинг</a></li>
  <li><a href="">Кикбоксинг</a></li>
  <li><a href="">ММА</a></li>
  <li><a href="">Тайский бокс</a></li>
</ul>

CSS

.martial-arts-list {
  line-height: 30px;
}

.martial-arts-list li {
  list-style: none;
  margin-left: 30px;
}

.martial-arts-list a {
  text-decoration: none;
}

.martial-arts-list li a {
  color: #999;
}

.martial-arts-list li a:hover {
  color: black;
  transition: 0.5s;
}

.martial-arts-list-current {
  background-color: #4d90fe;
  padding: 5px 20px;
  width: 100%;
  color: white;
  border-radius: 10px;
}