JSFiddle - React, Tailwind, and code Playground

HTML

<a class="round" href="#">
        <img src="favicon.png" align="center" /><br />Power and Electricity
</a>
<a href="#">
    <div class="round">
        <img src="favicon.png" align="center" /><br />Power and Electricity
    </div>
</a>
<a href="#">
    <div class="round">
        <img src="favicon.png" align="center" /><br />Power and Electricity
    </div>
</a>
<a href="#">
    <div class="round">
        <img src="favicon.png" align="center" /><br />Power and Electricity
    </div>
</a>

CSS

.round{
   /* display: block;*/
    float: left;
    -moz-border-radius:50%;  /* for Firefox */
    -webkit-border-radius:50%; /* for Webkit-Browsers */
    border-radius:50%; /* regular */
    opacity:1; /* Transparent Background 50% */
    background:#eee;
    padding:40px;
    height:70px;
    width:70px;
    text-align: center;
    alignment-adjust: middle;
    vertical-align:middle;
    text-decoration: none;
    color:#000;
}
.round:hover{
    -moz-border-radius:50%;  /* for Firefox */
    -webkit-border-radius:50%; /* for Webkit-Browsers */
    border-radius:50%; /* regular */
    opacity:1; /* Transparent Background 50% */
    background:#000;
    padding:40px;
    height:70px;
    width:70px;
    text-align: center;
    alignment-adjust: middle;
    vertical-align:middle;
    text-decoration: none;
    color:#fff;
}