JSFiddle - React, Tailwind, and code Playground

by lokdmt

HTML

<ul class="menu">
  <li class="menu__item"><a href="#" class="menu__link">Item1</a></li>
  <li class="menu__item"><a href="#" class="menu__link">Item2</a></li>
  <li class="menu__item"><a href="#" class="menu__link">Item3</a></li>
</ul>

SCSS

.menu{
  &__item{
    display: inline-block;
    margin-right: 30px;
    &:last-child{
      margin-right: 0;
    }
  }
  &__link{
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    font-size: 16px;
    &:hover{
      &:before{
        content: '';
        position: absolute;
        bottom: -15px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: green;
      }
    }
  }
}