JSFiddle - React, Tailwind, and code Playground

by Apple Ilagan

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%"> 
  <stop stop-color="rgb(0,0,12)" offset="0%" id="zenith">
    <animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(32,32,44,0.5);rgba(64,64,92,.8);rgb(74,73,105);rgb(117,122,191);rgb(130,173,219);rgb(148,197,248);rgb(183,234,255);rgb(144,223,254);rgb(87,193,235);rgb(45,145,194);rgb(36,115,171);rgb(30,82,142);rgb(30,82,142);rgb(21,66,119);rgba(22,60,82,0.8);rgba(7,27,38,.5);rgba(1,10,16,.3);rgba(9,4,1,0);rgba(0,0,12,0);rgba(0,0,12,0)"
    repeatCount="indefinite" />
    <animate attributeName="offset" dur="24s" values="0;.85;.6;.1;0;0;0;0;0;.01;0;0;0;0;0;0;0;0;0;0;.3,.5,.8,0"
    repeatCount="indefinite" />
  </stop>
  
  <stop stop-color="rgb(0,0,12)" offset="100%" id="horizon">
    <animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(25,22,33,.3);rgba(32,32,44,.8);rgb(58,58,82);rgb(81,81,117);rgb(138,118,171);rgb(205,130,160);rgb(234,176,209);rgb(235,178,177);rgb(177,181,234);rgb(148,223,255);rgb(103,209,251);rgb(56,163,209);rgb(36,111,168);rgb(30,82,142);rgb(91,121,131);rgb(157,166,113);rgb(233,206,93);rgb(178,99,57);rgb(47,17,7);rgb(36,14,3);rgb(47,17,7);rgba(75,29,6,.4);rgba(21,8,0,0);rgba(0,0,12,0)"
    repeatCount="indefinite" />
  </stop>
</linearGradient> 
<rect id="sky" x="0" y="0" width="100%" height="100%"  style="fill:url(#skyGradient)" /> 
</svg>
<div class="sun"></div>

CSS

@keyframes suntrack {	
  from { transform: rotate(.15turn); }
  to { transform: rotate(-.85turn); }
}

@keyframes sunpulse { 
   from { box-shadow: 0 0 100px #ff0, 0 0 100px #ff0; }
  to { box-shadow: 0 0 50px #ff0, 0 0 75px #ff0;  }
}
body { margin: 0; 
  background-color: #000;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/starfield_stock_1.jpg); 
  background-size:cover;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.sun {
  width: 15vw;
  height: 15vw;
  background: #ff0;
  background: radial-gradient(ellipse at center, #f90 0%,#fc0 60%,#ff0 100%);
  border-radius: 100%;
  position: absolute;
  bottom: -7vw;
  right: 7vw;
  transform-origin: -28vw 7vw;
  animation: suntrack 24s infinite forwards linear, sunpulse 2s alternate infinite; 
}
.moon { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moon8.png);
  width: 15vw;
  height: 15vw;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90% 90%;
  border-radius: 100%;
  bottom: -7vw;
  right: 7vw;
  transform-origin: -28vw 7vw;
  animation: moontrack 24s infinite forwards linear;
  opacity: .8;
}