JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://daneden.me" class="avatar">
    <img src="https://www.w3schools.com/howto/img_forest.jpg">
</a>

CSS

body {
    background: #67676a;
    padding: 100px;
}

.avatar {
    display: block;
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 100%;
    padding: 4px;
    background: -webkit-linear-gradient(#fdfdfd, #c9c9c9);
    box-shadow: 0 1px 4px 2px rgba(0,0,0,.3);
    margin: 0 auto;
}

.avatar img {
    display: block;
    width: 128px;
    height: 128px;
    border-radius: 100%;
}

.avatar:before, .avatar:after {
    width: 128px;
    height: 128px;
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 5;
    pointer-events: none;
    border-radius: 100%;
}

.avatar:before {
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,.4);
}

.avatar:after {
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,.0), rgba(255,255,255,.2) 50%, rgba(255,255,255,.0) 50%);
    -webkit-mask-image: -webkit-linear-gradient(#000, rgba(0,0,0,0) 70%);
}