JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href=""><strong>HTML</strong>
        <span>description</span>
        <span>other description</span>
    </a></li>
    <li><a href=""><strong>News</strong>
        <span>blah</span>
        <span>other blah</span>
    </a></li>
    <li><a href=""><strong>News</strong>
        <span>blah</span>
        <span>other blah</span>
    </a></li>
    <li><a href=""><strong>News</strong>
        <span>blah</span>
        <span>other blah</span>
    </a></li>
    <li><a href=""><strong>News</strong>
        <span>blah</span>
        <span>other blah</span>
    </a></li>
</ul>

CSS

ul {margin 0 auto; width:500px; overflow:hidden}
li {float:left; margin:1em; width:200px; background-color:gray}
li:last-child {clear:both; float:none; margin-left:auto; margin-right:auto}
li a * {display:block; text-align:center; color:black}
li a strong {font-size:2em; text-decoration:underline; color:blue}