JSFiddle - React, Tailwind, and code Playground

by James Butler

HTML

<div class="sphere"></div>

CSS

.sphere {
  height: 200px;
  width: 200px;
  border-radius: 0 50% 50% 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
    transform:rotate(45deg);
    background:cornflowerblue;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 10%;
  left: 10%;
  border-radius: 50%;
  transform: rotate(10deg);