JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="logoMain">
	<div id="logoInside"></div>
	<div id="logoMainafter"></div>
</div>
</body>

CSS

#logoMain {
	width: 100px;
	height: 100px;
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 50%;
	box-shadow: 0px 0px 50px 0px #999 inset ;
	position: relative;
}

#logoMainafter {
  width: 100px;
  height: 100px;
  margin-top: -35px;
  margin-left: 55px;
  display: block;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

#logoInside {
	width: 50px;
	height: 50px;
	margin: 24px;
	background-color: #fe0000;
	border: 1px solid red;
	border-radius: 50%;
	box-shadow: 0px 0px 15px 3px #a80000 inset;
	z-index: 23;
	position: absolute;
}

#logoMain:after {
	content: "";
	width: 50px;
	height: 50px;
	position: absolute;
	top: 2px;
	left: 57px;
	/* background-color: green; */
	border-radius: 50%;
	box-shadow: -19px 17px 0px 14px #e80000;
	clip: rect(0px, 12px, 63px, -110px);
	z-index: 0;
}