JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle_main">
          <div class="circle_sub">
            <img src="http://upload.wikimedia.org/wikipedia/en/2/2b/The_Circle_logo.png"  width="170px" height="170px" alt=""/>
          </div>
</div>

CSS

.circle_main
{
    border: 1px solid #288CED;
    width: 190px;
    height: 190px;
    padding: 0px;
    -webkit-border-radius: 90px;
    -moz-border-radius: 90px;
    border-radius: 105px;
}
.circle_main:hover
{
    background-color: #288CED;
    transition: all 1s ease 0s;
    cursor:pointer;
}
.circle_sub
{
    border: 5px solid #2D5260;
    width: 170px;
    height: 170px;
    padding: 0px;
    margin:0px auto;
    border-radius: 105px;
    margin-top: 5px;
    overflow: hidden;
}