JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<div class="frame"><div></div></div>

CSS

.frame {
    position:relative;
    width:150px;
    height:150px;
    border-radius:77px;
    background:linear-gradient(to right, #096bff 0%,#61a0ff 30%,#75d3ff 55%,#1f79ff 100%);
    border:2px solid #0B4DB5;
    box-shadow:4px 4px 4px 0px gray;
    -webkit-transition:border-radius 0.3s;
    transition:border-radius 0.3s;
    cursor:pointer;
}

.frame div {
    position:absolute;
    content:"";
    width:144px;
    height:144px;
    left:2px;
    top:2px;
    border-radius:73px;
    background-color:white;
    border:1px solid #2E67A5;
    background-image:url(http://goo.gl/ecnU1t);
    background-size:cover;
    box-shadow:4px 4px 4px 0px gray inset;
    -webkit-transition:border-radius 0.3s;
    transition:border-radius 0.3s;
}

.frame div:after {
    position:absolute;
    content:"";
    width:143px;
    height:143px;
    background-color:rgba(0,0,0,0.1);
    border-radius:72.5px;
    -webkit-transition:border-radius 0.3s,background-color 0.3s;
    transition:border-radius 0.3s,background-color 0.3s;
}

.frame:hover {
    border-radius:5px;
    -webkit-transition:border-radius 0.3s;
    transition:border-radius 0.3s;
}

.frame:hover div {
    border-radius:4px;
    -webkit-transition:border-radius 0.3s;
    transition:border-radius 0.3s;
}

.frame:hover div:after {
    border-radius:4px;
    background-color:rgba(0,0,0,0);
    -webkit-transition:border-radius 0.3s,background-color 0.3s;
    transition:border-radius 0.3s,background-color 0.3s;
}