JSFiddle - React, Tailwind, and code Playground

by Rymarovich Vasily

HTML

<body>
  <div class="sky" id="sky">
  </div>
    <div class="sun" id ="sun">
  </div>
  <div class="sunset" id="sunset">
  </div>
  <div class="night" id="night">
  </div>
  <div class="earth">
  </div>
</body>

CSS

.sky {
  width: 100%;
  height: 50%;
  position: absolute;
background: rgb(84,171,242);
background: -moz-linear-gradient(top, rgba(84,171,242,1) 1%, rgba(0,155,211,1) 68%, rgba(201,216,221,1) 100%);
background: -webkit-linear-gradient(top, rgba(84,171,242,1) 1%,rgba(0,155,211,1) 68%,rgba(201,216,221,1) 100%);
background: linear-gradient(to bottom, rgba(84,171,242,1) 1%,rgba(0,155,211,1) 68%,rgba(201,216,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54abf2', endColorstr='#c9d8dd',GradientType=0 );
  z-index: 2;
  opacity: 0.5;
}
.sunset{
  width: 100%;
  height: 50%;
  position: absolute;
background: rgb(31,81,124);
background: -moz-linear-gradient(top, rgba(31,81,124,1) 0%, rgba(221,100,42,1) 91%, rgba(221,100,42,1) 100%);
background: -webkit-linear-gradient(top, rgba(31,81,124,1) 0%,rgba(221,100,42,1) 91%,rgba(221,100,42,1) 100%);
background: linear-gradient(to bottom, rgba(31,81,124,1) 0%,rgba(221,100,42,1) 91%,rgba(221,100,42,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f517c', endColorstr='#dd642a',GradientType=0 );
opacity: 0.5;
  z-index: 3;
}
.night{
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgb(9,31,48);
background: -moz-linear-gradient(top,  rgba(9,31,48,1) 0%, rgba(25,18,0,1) 100%);
background: -webkit-linear-gradient(top,  rgba(9,31,48,1) 0%,rgba(25,18,0,1) 100%);
background: linear-gradient(to bottom,  rgba(9,31,48,1) 0%,rgba(25,18,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#091f30', endColorstr='#191200',GradientType=0 );
 z-index: 5;
 opacity: 0;
}
.sun {
  width: 100%;
  height: 50%;
  position: absolute;
  z-index: 3;
  opacity: 0.5;
}
.earth {
  background-color: green;
  width: 100%;
  height: 50%;
  position:absolute;
  top:50%;
  z-index:4;
}

JavaScript

var animation = setInterval(frame,20000);
var angle = 180;
var sun = document.getElementById("sun");
var sky = document.getElementById("sky");
var sunset = document.getElementById("sunset");
var night = document.getElementById("night");
function frame() {
	var x = 180 * Math.sin(angle*Math.PI/180)+200;
  var y = 180 * Math.cos(angle*Math.PI/180)+250;
  angle++;
  document.getElementById("sun").style.background = '-webkit-radial-gradient(' + x + 'px ' + y + 'px, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 2%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%)';
      document.getElementById("sun").style.background = '-moz-radial-gradient(' + x + 'px ' + y + 'px, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 2%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%)';
      document.getElementById("sun").style.background = '-ms-radial-gradient(' + x + 'px ' + y + 'px, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 2%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%)';
  var style = '';
  sunset.style.opacity = sliderValue(20, 180, y, 0, .7);
  night.style.opacity = sliderValue(180, 360, y, 0, .95);
  //style = 'opacity: '+sliderValue(-180, 0, y, 0, 1);
  //document.getElementById("text").innerHTML =y;
  if (angle>65535) angle=0;
}
function sliderValue(min, max, current, minValue, maxValue){
var currentValue = 0;
if (minValue==maxValue) currentValue = minValue;
if (max>min){
  if (current<min) current = min;
  if (current>max) current = max;
} else{
  if (current>min) current = min;
  if (current<max) current = max;
}
currentValue = minValue + (current - min)/(max - min)*(maxValue - minValue);
return currentValue;
}