JSFiddle - React, Tailwind, and code Playground

by Lokeshg27

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="round"></div>

CSS

.round {
  width:300px;
  height:300px;
  border-radius:50%;
  background: rgba(0,0,0,0.8);
  background-image:radial-gradient(circle at 50% 30%,#cacaca,#333);
  -webkit-background-image:radial-gradient(circle at 50% 30%,#cacaca,#333);
  position:relative;
  overflow:hidden;
}

.round:after, .round:before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  border-radius:50%;
  opacity:0.2;
}
.round:before {
  left:0;
  top:30px;
  transform: rotate(22deg);
  transform-origin: -13% 52%;
  -webkit-transform-origin: -13% 52%;
  background-image: radial-gradient(circle at -11% 30%,#333,#999);
  background-image: -webkit-radial-gradient(circle at -11% 30%,#333,#999);
}

.round:after {
  right:0;
  top:30px;
  transform: rotate(22deg);
  transform-origin: 22% 125%;
  -webkit-transform-origin: 22% 125%;
  background-image: radial-gradient(circle at -45% 30%,#999,#333);
  -webkit-background-image: radial-gradient(circle at -45% 30%,#999,#333);
}