JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
      <div class="item"><a href="#1">Link 1</a></div>
      <div class="item"><a href="#2">Link 2</a></div>
      <div class="item"><a href="#3">Link 3</a></div>
      
    </div>

CSS

html, body {
  margin: 0px;
  padding: 0px;
}


#menu {
  text-align: center;
  margin: 0px;
  padding:0px;
  background-color: #CEE2FF;
  border-bottom: 1px dashed #1868FF;
}
#menu div.item {
  margin: 0px;
  padding: 0px;
  display: inline;

}
#menu div.item a{
  font-family: monospace;
  text-decoration: none;
  margin: 0px;
  padding: 5px;
  color: #006CFF;
  
  border-width: 0px 1px 0px 1px;
  border-color: transparent;
  border-style: dashed;
    
  line-height:30px;
  vertical-align:top;
}
#menu div.item a:hover{
  border-color: black;
  background: #B3D2FF;
}