JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
  <li>
    <a href="/product/splash/95">Home</a>
  </li>
  
    <li id="Caskets">
      <a href="/product/list?cattree=5089&amp;kiosk=95">Caskets</a>
    </li>
  
    <li id="Burial Vaults">
      <a href="/product/list?cattree=5100&amp;kiosk=95">Burial Vaults</a>
    </li>
  
    <li id="Cremation">
      <a href="/product/list?cattree=5101&amp;kiosk=95">Cremation</a>
    </li>
  
    <li id="Stationery">
      <a href="/product/list?cattree=5143&amp;kiosk=95">Stationery</a>
    </li>
  
  
    <li>
      <a href="javascript:history.go(-1)" onmouseover="self.status=document.referrer;return true">Back</a>
    </li>
  
  </ul>

CSS

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

body, p, ol, ul, td {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
line-height: 16px;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

li {
float: left;
position: relative;
width: 7em;
text-align: center;
cursor: default;
background-color: white;
border: 2px solid #7d6340;
border-width: 1px 0;
    display: list-item;
}