JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<section id="mainContent">
    
    <article>
        <div><img src="https://twimg0-a.akamaihd.net/profile_images/1816209603/me.png" alt="something" /></div>
    </article>
    
</section>

CSS

body {
    background: #EDE9CC;
}
section {
    position: relative;
    width: 1px;
    height: 1px;
    margin: 20px auto;
}
article {
    position: absolute;
    border-radius: 100%;
}
article div {
    overflow: hidden;
    border: 10px solid #FFFEF2;
    border-radius: 100%;
}
article div:after {
    z-index: -1;
    position: absolute;
    display: block;
    content:"";
    
    margin: 8px 0 0 8px;
    
    top:0;
    left:0;
    width: 95%;
    height: 95%;
    
    background: #FAF7DE;
    border-radius: 100%;
    
    box-shadow: inset -10px -10px 20px rgba(0,0,0,.08), 0 0 12px rgba(0,0,0,.12);
}
article div img {
    display: block;
}