JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
	<div class="sky"></div>
    <div class="moon_1">
    	<div class="crater_1"></div>
        <div class="crater_2"></div>
        <div class="crater_3"></div>
        <div class="crater_4"></div>
        <div class="crater_5"></div>
        <div class="crater_6"></div>
    </div>
    <div class="clouds_3">
    	<div class="cloud_1"></div>
        <div class="cloud_2"></div>
        <div class="cloud_3"></div>
        <div class="cloud_4"></div>
    </div>
    <div class="clouds_2">
    	<div class="cloud_1"></div>
        <div class="cloud_2"></div>
        <div class="cloud_3"></div>
        <div class="cloud_4"></div>
        <div class="cloud_5"></div>
    </div>
    <div class="home">
    	<div class="home_1"></div>
        <div class="home_3"></div>
        <div class="home_4"></div>
        <div class="home_5"></div>
        <div class="home_6"></div>
        <div class="home_7"></div>
        <div class="home_8"></div>
        <div class="home_9"></div>
        <div class="home_10"></div>
        <div class="home_11"></div>
        <div class="home_12"></div>
        <div class="home_13"><div class="line-1"></div><div class="line-2"></div></div>
        <div class="home_14"><div class="line-1"></div><div class="line-2"></div></div>
        <div class="home_15"></div>
    </div>
    <div class="clouds_1">
    	<div class="cloud_1"></div>
        <div class="cloud_2"></div>
        <div class="cloud_3"></div>
        <div class="cloud_4"></div>
        <div class="cloud_5"></div>
    </div>
    <div class="land_5">
    	<div class="hill_1"></div>
    </div>
    <div class="land_4">
    	<div class="hill_1"></div>
        <div class="hill_2"></div>
        <div class="hill_3"></div>
        <div class="hill_4"></div>
        <div class="hill_5"></div>
        <div class="hill_6"></div>
        <div class="hill_7"></div>
        <div class="hill_8"></div>
        <div class="hill_9"></div>
    </div>
    <div class="land_3">
    	<div...

CSS

.wrap {
	width:400px; height:400px;
	position:relative;
	overflow:hidden;
}
.sky {
	background:#61506a;
    background:linear-gradient(to top, #806f85, #40304d);
	background:-webkit-linear-gradient(to top, #806f85, #40304d);
	background:-moz-linear-gradient(to top, #806f85, #40304d);
	background:-o-linear-gradient(to top, #806f85, #40304d);
	position:absolute; top:0; left:0;
	width:100%; height:140px;
}
.land_1 div { background:#41405f; position: absolute;}
.land_1 .hill_1 {
	border-radius: 50% 0 0 0;
    bottom: -60px;
    height: 160px;
    right: -121px;
    transform: rotate(0deg);
    width: 240px;
}
.land_1 .hill_2 {
	border-radius: 50% 50% 0 0;
    bottom: -146px;
    height: 254px;
    left: 40px;
    transform: rotate(27deg);
    width: 327px;
}
.land_1 .hill_3 {
	border-radius: 50% 50% 0 0;
    bottom: 51px;
    height: 84px;
    left: -69px;
    width: 200px;
}
.land_1 .hill_4 {
    bottom: 0;
    height: 54px;
    left: 0;
    width: 65px;
}

.land_2 div { background:#4d4e7c; position: absolute;}
.land_2 .hill_1 {
	border-radius: 50% 50% 0 0;
    bottom: -60px;
    height: 215px;
    right: -121px;
    transform: rotate(6deg);
    width: 624px;
}
.land_3 div { background:#53568b; position: absolute;}
.land_3 .hill_1 {
	border-radius: 50% 50% 0 0;
    bottom: -60px;
    height: 232px;
    right: -121px;
    transform: rotate(3deg);
    width: 624px;
}

.land_4 div { background:#6f749a; position: absolute;}
.land_4 .hill_1 {
	border-radius: 50% 50% 0 0;
    bottom: 34px;
    height: 204px;
    left: -23px;
    transform: rotate(-19deg);
    width: 238px;
}
.land_4 .hill_2 {
	border-radius: 50% 50% 0 0;
    bottom: 61px;
    height: 140px;
    left: 42px;
    transform: rotate(48deg);
    width: 262px;
}
.land_4 .hill_3 {
	border-radius: 50% 50% 0 0;
    bottom: 55px;
    height: 121px;
    left: 332px;
    transform: rotate(19deg);
    width: 262px;
}
.land_4 .hill_4 {
    border-radius: 50% 50% 0 0;
    bottom: 65px;
    height: 121px;
    left: 63px;
...