JSFiddle - React, Tailwind, and code Playground

by Ron Valstar

HTML

<div></div>

CSS

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  color: white;
}

body {
  background-color: black;
  font-size: 64px;
}

div { position: relative; }
div:before {
  --size: 200vw;
  content: '';
  position: absolute;
  left: -130vw;
  top: -110vw;
  z-index: 1;
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: calc(var(--size)/2);
  box-shadow: 0 0 20vw 5vw #4A8273 inset, 0 0 0 100vw black;
}
div:after {
  --size: 80vw;
  content: '';
  position: absolute;
  left: 10vw;
  top: -50vw;;
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: calc(var(--size)/2);
  background-image: radial-gradient(red, transparent 70%);
}