JSFiddle - React, Tailwind, and code Playground

HTML

<body>


<div class='wrapper'>
<!--
================================
						LANDSCAPE
==============================-->
<div class='landscape'>
<div class='sun'></div>

	<div class='land l1'>
		<div class='windmill s1'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s1'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s1'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
	</div>

	<div class='land l2'>
		<div class='windmill s2'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s2'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s2'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
	</div>

	<div class='land l3'>
		<div class='windmill s3'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s3'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s3'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
	</div>
  
	<div class='land l4'>
		<div class='windmill s4'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s4'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t...

CSS

* {box-sizing: border-box;}

*:before, *:after {
	content: '';
	display: block;
	position: absolute;
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #593c1e;

}
.wrapper {
		position: relative;
	width: 100%;
	height: 100%;
}

/*
=================================
					LANDSCAPE STYLE
=================================
*/

.landscape {
	position: relative;
	height: 100%;
	background: #db9;
	overflow: hidden;
}

.landscape div {position: absolute;}

.sun {
	left: 50%;
	bottom: 200px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: linear-gradient(to bottom, #ff8 50%, rgba(208, 73, 73, 0) 100%);
	box-shadow: 0px -20px 200px #FFFF8C;
}

.land {
	left: 50%;
	width: 2000px;
	height: 2000px;
	border-radius: 50%;
}

.l1{bottom:-1850px;margin-left:-1100px;background:#d0a273}
.l2{bottom:-1700px;margin-left:-300px;background:#c4884d}
.l3{bottom:-1900px;margin-left:-800px;background:#a66f37}
.l4{bottom:-1800px;margin-left:-1700px;background:#80552b}

.windmill {
	width: 2px;
}

.windmill .turbine {
	top: -5px;
	left: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	  -webkit-animation: 7s rotate infinite linear;
		animation: 7s rotate infinite linear;
}

.windmill .t{left:2px;width:0;height:0;border-style:solid;border-color:transparent;-webkit-transform-origin:bottom;transform-origin:bottom}

.windmill.s1{width:2px;height:15px}
.windmill.s1 .t{top:-2px;left:4px;width:2px;height:7px;border-width:0}
.windmill.s2{height:20px;-webkit-transform:rotateY(120deg);-ms-transform:rotateY(120deg);transform:rotateY(120deg)}
.windmill.s2 .t{top:-10px;border-bottom-width:12px}
.windmill.s3{height:35px}
.windmill.s3 .t{top:-18px;border-bottom-width:20px}
.windmill.s4{height:50px}
.windmill.s4 .t{top:-28px;border-bottom-width:30px}

.l1 .s1{background:#d0a273}
.l1 .s1 .t{background:#d0a273}
.l2 .s2{background:#c4884d}
.l2 .s2 .t{border-bottom-color:#c4884d}
.l3 .s3{background:#a66f37}
.l3 .s3...