JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<div class="menu">
  <a href="#" class="link">Home</a>
  <a href="#" class="link active">About</a>
  <a href="#" class="link">Contacts</a>
</div>

SCSS

.menu {
  border-bottom: 1px solid #555;
  .link {
    display: inline-block;
    color: #222;
    text-decoration: none;
    position: relative;
    padding: 10px 20px;
    outline: 1px solid red; // Для наглядності
    &.active:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid black;
      margin-left: -5px;
      outline: 1px solid green; // Для наглядності
    }
  }
}