JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<div>
<div class="menu-header"><a href="#">Menu 1</a></div>
<div class="menu-header-wo-action">Menu 1</div>
<div class="menu-item"><a href="#">Menu 1</a></div>
<div class="menu-item"><a href="#">Menu 1</a></div>
<div class="menu-item"><a href="#">Menu 1</a></div>
<div class="menu-item"><a href="#">Menu 1</a></div>
<div class="sub-menu-item"><a href="#">Sub Menu 1</a></div>
<div class="sub-menu-item"><a href="#">Sub Menu 1</a></div>
<div class="sub-menu-item"><a href="#">Sub Menu 1</a></div>
</div>

CSS

.menu-header,
.menu-item,
.sub-menu-item {
  border-left: 1px solid red;
}
.menu-header-wo-action {
  padding-left: 14px;
}
a {
  padding-left: 10px;
  border-left: 4px solid transparent;
}
a:hover,
a.active{
  border-left: 4px solid yellow;
  display: block;
}
.sub-menu-item a {
  padding-left: 20px;
  border-left: 4px solid transparent;
}
.sub-menu-item a:hover {
  padding-left: 20px;
  border-left: 4px solid yellow;
  display: block;
}