JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="rounded-cats" class="cleardiv">
	<li>
		<a href="#">
            <div class="cats-wrap">
                <span>
                    <img src="http://placehold.it/70" height="70" />
                </span>
                <strong>
                        Category name
               </strong>
           </div>
		</a>
	</li>
    <li>
		<a href="#">
            <div class="cats-wrap">
                <span>
                    <img src="http://placehold.it/70" height="70" />
                </span>
                <strong>
                        Category name
               </strong>
           </div>
		</a>
	</li>
    <li>
		<a href="#">
            <div class="cats-wrap">
                <span>
                    <img src="http://placehold.it/70" height="70" />
                </span>
                <strong>
                        Category name
               </strong>
           </div>
		</a>
	</li>
    <li>
		<a href="#">
            <div class="cats-wrap">
                <span>
                    <img src="http://placehold.it/70" height="70" />
                </span>
                <strong>
                        Category name
               </strong>
           </div>
		</a>
	</li>
    <li>
		<a href="#">
            <div class="cats-wrap">
                <span>
                    <img src="http://placehold.it/70" height="70" />
                </span>
                <strong>
                        Category name
               </strong>
           </div>
		</a>
	</li>
    <li>
		<a href="#">
            <div class="cats-wrap">
                <span>
                    <img src="http://placehold.it/70" height="70" />
                </span>
                <strong>
                        Category name
               </strong>
           </div>
		</a>
	</li>
    <li>
		<a href="#">
            <div class="cats-wrap">
                <span>
                    <img src="http://placehold.it/70" height="70" />
                </span>
        ...

CSS

#rounded-cats {
	text-align: center;
	//display: table;
	border: 1px solid red;
	width: 100%
}
#rounded-cats li {
	//margin-bottom: 20px;
	//height: 190px;
	display: inline;
}
#rounded-cats span {
	background: #c7c7c7;
	width: 112px;
	height: 112px;
	border-radius: 50%;
    
    position: relative;
    
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	text-align: center;
	display: inline-block;
	vertical-align:middle;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#rounded-cats span img {
	display: inline !important;
    
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -35px;
    margin-top: -35px;
    
}
#rounded-cats .cats-wrap{
    display: inline-block;
    position: relative;
    height: 140px;
}
#rounded-cats strong{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#rounded-cats a:hover span {
	background: #7c6eb0	
}
#rounded-cats a:hover {
	color: #7c6eb0	
}
#rounded-cats img {
	margin: auto;
	display: block; 
}