JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sun"></div>

CSS

body {
  background-color: #191231;
}

.sun {
  margin: 2rem;
  position: relative;
  width: 412px;
  padding-top: 412px;
  background: linear-gradient(#fbed20 0%,
      #fd8427 30%,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0) 30.5%,
      #ff8427 30.5%,
      #fe6928 38%,
      rgba(0, 0, 0, 0) 38%,
      rgba(0, 0, 0, 0) 39%,
      #fe6928 39%,
      #fe5430 45%,
      rgba(0, 0, 0, 0) 44%,
      rgba(0, 0, 0, 0) 46.5%,
      #fe5430 46.5%,
      #fe4b38 52%,
      rgba(0, 0, 0, 0) 52%,
      rgba(0, 0, 0, 0) 53.5%,
      #fe4b38 53.5%,
      #fe3446 59%,
      rgba(0, 0, 0, 0) 59%,
      rgba(0, 0, 0, 0) 61%,
      #fe3446 61%,
      #fe2558 66%,
      rgba(0, 0, 0, 0) 66%,
      rgba(0, 0, 0, 0) 69%,
      #fe2558 69%,
      #fe1f5f 74%,
      rgba(0, 0, 0, 0) 74%,
      rgba(0, 0, 0, 0) 77%,
      #fe1f5f 77%,
      #fe1967 84%,
      rgba(0, 0, 0, 0) 84%,
      rgba(0, 0, 0, 0) 88%,
      #fe1967 88%,
      #fe126f 92%,
      rgba(0, 0, 0, 0) 92%,
      rgba(0, 0, 0, 0) 100%);
  border-radius: 50%;
  box-shadow: 0px -50px 50px rgba(255, 13, 119, 0.686);
}

.sun:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 13, 119, 0.686), rgba(0, 0, 0, 0));
}