JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class='uparrow'>&#9652;</li>
    <li class='circle'>&#8226;<span>&#8226;</span></li>
    <li class='downarrow'>&#9660;</li>
</ul>

CSS

li{
    float:left;
    list-style:none;
}
.uparrow,.downarrow,.circle {
    height:30px;
    width:30px;
    background:#ccc;
    font-size:50px;
    color:red;
    line-height:25px;
    text-indent:2px;
    margin:10px;
}
.downarrow{
    font-size:23px;
    text-indent:4px;
    line-height:35px;
}
.circle{
    position:relative;
    text-indent:6px;
    line-height:30px;
}
.circle span{
    color:black;
    font-size:20px;
    position:absolute;
    right:42%;
    top:3%;
}

JavaScript

.c