JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="sonne">

</div>
<div id="regenbogen">

</div>

CSS

body {
  overflow: hidden;
  position: relative;
}
#sonne {
  width: 20vw;
  height: 20vw;
  position: absolute;
  z-index: -100;
  top: 10vw;
  left: 10vw;
  border-radius: 10vw;
  background-image: radial-gradient(circle,
    yellow 70%,
    white 70%
  )
}
#regenbogen {
  width: 100vw;
  height: 200vh;
     background-image: radial-gradient(
      circle closest-side at center,
      transparent 70%,
      red 75%,
      yellow 80%,
      green 85%,
      blue 90%,
      violet 95%,
      transparent 100%
      
   );
   background-size: cover;
}