JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="group">
  <ul>
    <li class="accepted">
      <a href="#l1">Главная</a>
    </li>
    <li class="accepted">
      <a href="#l2">Таро</a>
      <ul>
        <li class="accepted">
          <a href="#l2-1">Онлайн Гадания</a>
        </li>
        <li class="accepted">
          <a href="#l2-2">Справочник</a>
        </li>
      </ul>
    </li>
    <li class="accepted">
      <a href="#l3">Карты</a>
      <ul>
        <li class="accepted">
          <a href="#l3-1">Онлайн Гадания</a>
        </li>
        <li class="accepted">
          <a href="#l3-2">Справочник</a>
        </li>
      </ul>
    </li>
    <li class="accepted">
      <a href="#l4">Руны</a>
      <ul>
        <li class="accepted">
          <a href="#l4-1">Онлайн Гадания</a>
        </li>
        <li class="accepted">
          <a href="#l4-2">Справочник</a>
        </li>
      </ul>
    </li>
    <li class="accepted">
      <a href="#l5">Необычные гадания</a>
    </li>
    <li class="possible">
      <a href="#l6">Гороскопы</a>
    </li>
    <li class="possible">
      <a href="#l7">Нумерология</a>
    </li>
    <li class="accepted">
      <a href="#l8">Публикации</a>
    </li>
  </ul>
</div>

CSS

html {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

h2 {
  font-weight: 300;
}

.group a {
  color: currentColor;
  display: inline-block;
  padding: 3px;
}

.group a:hover {
  text-decoration: none;
  opacity: 0.6;
}

.accepted {
  color: #3cb384;
}

.possible {
  color: #cd4421;
}