JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid black;
    position: relative;
    background: linear-gradient(45deg, rgba(175,17,228,1) 0%,rgba(247,95,24,1) 100%); /* W3C */

}
div:after{
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    top: 50%;
    margin-top: -25px;
    border-radius: 50%;
    border:1px solid black;
    background: #fff;
    z-index: 10;
}