JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#rounded-cats {
	text-align: center !important;
	border: 1px solid red;
	width: 100%;
}
#rounded-cats li {
	height: 190px;
    list-style: none;
    margin: 10px;
    display: inline-block;
}
#rounded-cats span {
	background: #c7c7c7;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	display: table-cell;
	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 {
    
}
#rounded-cats a:hover span {
	background: #7c6eb0	
}
#rounded-cats a:hover {
	color: #7c6eb0	
}
#rounded-cats img {
    
}