JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg">
  <div class="circle">
    
  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}
.bg {
  background: #4C99FA;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  box-shadow: -1px 17px 0px 3px #3095e5, inset -4px 3px 10px 3px #3095e5, 2px -6px 20px 0px #3095e5;
    width: 250px;
    height: 250px;
    border: 80px solid #57A1FB;
    border-radius: 50%;
    transform: rotateX(49deg) rotateY(22deg);
  position:relative;
}