JSFiddle - React, Tailwind, and code Playground

HTML

<a class="circle" href="#">
    <img src="http://placekitten.com/300/300" alt="kitten" />
</a>

CSS

body {
    background-color: #EEEEEE;
    font-size: 62.5%;
    padding: 5em;
}
.circle {
    border: 1em solid #FFF;
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    display: block;
    height: 12em;
    margin: 2em -4em 2em 0;
    overflow: hidden;
    position: relative;
    width: 12em;
}
.circle img {
    border: 0 none;
    position: absolute;
    margin: -60px 0 0 -90px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
}