JSFiddle - React, Tailwind, and code Playground

by afshinprofe

HTML

<ul>
    <li>
        <div class="Menu">
          Menu Item 1
        </div>
        <div class="arrow"></div>
    </li>
    <li>
        <div class="Menu">
          Menu Item 2
        </div>
        <div class="arrow"></div>
    </li>
    <li>
        <div class="Menu">
          Menu Item 3
        </div>
        <div class="arrow"></div>
    </li>
    <li>
        <div class="Menu">
          Menu Item 4
        </div>
        <div class="arrow"></div>
    </li>
    
</ul>

CSS

ul{width:600px;
}
ul,li{
    
    display:inline-block;float:left;
}
.Menu {
 height:45px;
  font-size:20px;
  line-height:1.3em;
  margin:5px auto;
  padding:10px;
  position:relative;
  text-align:center;
  width:100px;


}
li:hover{
    background-color:blue;
    border:2px solid #666666; 
}
li:hover .arrow {
  border-color:  transparent transparent #666666 transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  bottom:-15px;
   margin:-20px auto;
}