JSFiddle - React, Tailwind, and code Playground

HTML

<ul style="text-align: center;list-style-type: none;margin: 1;padding: 0;display:inline-block;">
    <li style="list-style-position:inside;font: 200 18px/1.5 Helvetica, Verdana, sans-serif;border-bottom: 6px solid #00ff09;width: 80px;">
        <a href="a">TopDave25</a> 1000</li>
    <li style="font: 200 15px/1.5 Helvetica, Verdana, sans-serif;border-bottom: 6px solid #00a806;width: 80px;">
        <a href="b">Masterchief36</a> 400</li>
    <li style="font: 200 10px/1.5 Helvetica, Verdana, sans-serif;border-bottom: 6px solid #0d6b1d;width: 120px;">
        <a href="#">Your Username!</a>
    </li>
</ul>

CSS

.footer-location {
float: left;
width: 100%;
padding-right: 20px;
padding-left: 25px;
margin: 0 auto;
text-align: center;
}

.footer-location ul {
list-style: none;
}

.footer-location ul li {
color: #808080;
padding-bottom: 3px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
display:inline-block;
padding-right: 10px;
}