JSFiddle - React, Tailwind, and code Playground

HTML

<div class="target">
    &nbsp;1&nbsp; 
    <a href="#">&nbsp;2&nbsp;</a>&nbsp;
    <a href="#">&nbsp;3&nbsp;</a>&nbsp;
    <a href="#">&nbsp;>>&nbsp;</a>&nbsp;
</div>
<br />
<div class="target">
    <a href="#">&nbsp;<< &nbsp;</a>&nbsp;
    <a href="#">&nbsp;1&nbsp;</a>&nbsp;
    &nbsp;2&nbsp;
    <a href="#">&nbsp;3&nbsp;</a>&nbsp;
    <a href="#">&nbsp;>>&nbsp;</a>&nbsp;
</div>

CSS

.target{
    line-height:30px;
}

.target a {
    min-width:30px;
    height:30px;
    display:inline-block;
    background-color:yellow;
    text-align:center;
    padding:0px 3px;
    text-decoration:none;
}