JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<nav>
  <ul class="navigation">
    <li>test 1</li>
    <li>test 2</li>
  </ul>
</nav>

SCSS

nav {
  background: deepskyblue;
  padding: 10px;
  .navigation {
		display: flex;
		list-type: none;
		height: 50px;
		align-items: flex-end;
    li {
    	display: block;
			padding: 0 30px;
			position: relative;
			cursor: pointer;
			z-index: 10;
    }
		
		li:before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
		
		li:hover:before {
			background: darken(deepskyblue, 6%);
			bottom: -10px;
			z-index: 0;
		}
  }
}