JSFiddle - React, Tailwind, and code Playground

by _Sud

HTML

<div id="sun"></div>
<div class="hills">
	<div class="hill1"></div>
	<div class="hill2"></div>
	<div class="hill3"></div>
</div>

CSS

body{
	overflow:hidden; /*Hiding all Stuff */
	-webkit-animation-name: changeSkyColor; /* Change Shiny Sky to evening sky and to darkness */  /* Safari and Chrome */
	-webkit-animation-duration: 14s; /* Total time of animation */
	-webkit-animation-timing-function: linear; /* Just another timing function */
	-webkit-animation-iteration-count: infinite; /* Lets repeat sunrise and sunset till world ends :) */
	-webkit-animation-direction: alternate; /* Lets do in alternate fashion */
	-moz-animation-name: changeSkyColor; /* Change Shiny Sky to evening sky and to darkness */  /* Mozzilla */
	-moz-animation-duration: 14s; /* Total time of animation */
	-moz-animation-timing-function: linear; /* Just another timing function */
	-moz-animation-iteration-count: infinite; /* Lets repeat sunrise and sunset till world ends :) */
	-moz-animation-direction: alternate; /* Lets do in alternate fashion */
}

@-webkit-keyframes changeSkyColor /* Safari and Chrome */
{
	1%{
		background: -webkit-linear-gradient(top, rgba(30, 152, 209, 1) 0%,rgb(202, 229, 243) 40%,rgba(125, 185, 232, 0.82) 100%); /* Background of Sky */
	}
	11%{
		background: -webkit-linear-gradient(top, rgba(30, 152, 209, 1) 0%,rgb(202, 229, 243) 40%,rgba(125, 185, 232, 0.82) 100%); /* Background of Sky */
	}
	33%  {
		background: -webkit-linear-gradient(top, rgb(240, 231, 26) 0%,rgb(245, 86, 12) 50%,rgba(197, 127, 81, 0.82) 100%); /* Background of Sky */
	}
	66%  {
		background: -webkit-linear-gradient(top, rgb(34, 33, 3) 0%,rgb(162, 55, 5) 50%,rgb(24, 10, 1) 100%); /* Background of Sky */
	}
	100% {
		background: -webkit-linear-gradient(top, rgba(5, 5, 5, 1) 0%,rgb(54, 55, 56) 40%,rgb(3, 3, 3) 100%); /* Background of Sky */
	}
}
@-moz-keyframes changeSkyColor /* Mozzilla */
{

	1%{
		background: -moz-linear-gradient(top, rgba(30, 152, 209, 1) 0%,rgb(202, 229, 243) 40%,rgba(125, 185, 232, 0.82) 100%); /* Background of Sky */
	}
	33%  {
		background: -moz-linear-gradient(top, rgb(240, 231, 26) 0%,rgb(245, 86, 12)...