JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div id="wrapper">
    <div class="box"></div>
    <div class="box"><img src="http://placehold.it/150x150" /></div>
    <div class="box-animated">Hover</div>
    <div class="box border"></div>
    <div class="box border"><img src="http://placehold.it/150x150" /></div>
    <div class="box-animated border">Hover</div>
</div>

CSS

#wrapper {
    width:540px;
    margin:0 auto;
}

.box,
.box-animated{
    width:150px;
    height:150px;
    background:#39d;
    display:inline-block;
    transition:1s;
}

.box,
.box img{
    border-radius:50%;
}

.box-animated {
    text-align:center;
    color:#fff;
    font-family:sans-serif;
    line-height:150px;
    vertical-align:top;
}

.box-animated:hover {
    border-radius:50%;
    transition:1s;
}

.border {
    border:10px solid #9ac653;
}