JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
<ul>
        <li>
            <a href="#" itemprop="url">
                <span itemprop="title">item 1</span>
            </a>
        </li>
        <div class="arrow-right"></div>
        <li>
            <a href="#" itemprop="url">
                <span itemprop="title">item 2</span>
            </a>
        </li>
        <div class="arrow-right"></div>
        <li>
            <a href="#" itemprop="url">
                <span itemprop="title">item 3</span>
            </a>
        </li>
</ul>
</div>

CSS

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 0.5em solid transparent;
	border-bottom: 0.5em solid transparent;	
	border-left: 0.5em solid black;
    display: inline-block;
}

#menu ul{
  list-style: none;
}

#menu li{
  display: inline;
}

#menu a {
  color: black;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
}

#menu a:hover, #menu a:focus {
  text-decoration: underline;
}