JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div class="scene">
	<div class="stars">
		<div class="star"></div>
		<div class="star"></div>
		<div class="star"></div>
		<div class="star"></div>
		<div class="star"></div>
		<div class="star"></div>
		<div class="star"></div>
	</div>

	<div class="meteors">
		<div class="meteor"></div>
		<div class="meteor"></div>
		<div class="meteor"></div>
	</div>


	<div class="ground back-1"></div>
	<div class="ground back-2"></div>

	<div class="moon">
		<div class="disk"></div>
	</div>

	<div class="house">

		<div class="wall">
			<div class="crack"></div>
			<div class="crack"></div>
		</div>

		<div class="chimney"></div>

		<div class="roof">
			<div class="roof-wall"></div>
		</div>


		<div class="window">
			<div class="frame"></div>
			<div class="frame"></div>
			<div class="light"></div>
		</div>
	</div>

	<div class="smoke-area">
		<div class="smoke"></div>
		<div class="smoke"></div>
		<div class="smoke"></div>
		<div class="smoke"></div>
		<div class="smoke"></div>
		<div class="smoke"></div>
		<div class="smoke"></div>
		<div class="smoke"></div>
	</div>

	<div class="ground front"></div>
	<div class="ground front-2"></div>
</div>

CSS

body {
	background-color: #000000;
}

.scene {
	position: relative;
	width: 800px;
	height: 600px;
	margin: 50px auto;
	overflow: hidden;
	background-image: -webkit-linear-gradient(top, #011428, #032a54);
}

.ground {
	width: 400px;
	background-color: #f5f5f5;
	border-radius: 50%;
	width: 770px;
	height: 200px;
	position: absolute;
	bottom: 0;
	margin-bottom: -80px;
	right: 140px;
	background-color: #99a;
	box-shadow: 0 0 100px #457eb2 inset;
}
.ground.back-1 {left: 180px;}
.ground.front {margin-bottom: -124px;left: -27px;}
.ground.front-2 {margin-bottom: -109px;right: -508px;}

.house {
	position: absolute;
	width: 300px;
	height: 365px;
	bottom: 50px;
	right: 110px;
}

.house .roof {
	width: 340px;
	height: 170px;
	right: -20px;
	position: absolute;
	overflow: hidden;
}

.house .roof .roof-wall {
	position: absolute;
	width: 280px;
	height: 280px;
	background-color: #573808;
	-webkit-transform: rotate(45deg);
	left: 25px;
	top:60px;
	border: 5px solid #3a1e12;
	box-shadow: 0 0 30px black inset;
	background: repeating-linear-gradient(45deg, #573808 0%,#573808 5%,#3a1e12 5%,#3a1e12 5%,#3a1e12 5%,#573808 5%,#3a1e12 6%);
}

.house .wall {
	width: 100%;
	height: 200px;
	position: absolute;
	bottom: 0;
	background-color: #180c00;
	background: repeating-linear-gradient(to bottom, #573808 0%,#3a1e12 15%);
}

.house .wall .crack {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	background: repeating-linear-gradient(3deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 2%, rgba(0,0,0,0) 2%,#3a1e12 2%,#3a1e12 2%,#573808 2%,#3a1e12 3%);
}

.house .wall .crack:nth-child(2) {
	opacity: 0.3;
	background: repeating-linear-gradient(-4deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 2%, rgba(0,0,0,0) 2%,#3a1e12 2%,#3a1e12 2%,#573808 2%,#3a1e12 3%);
}

.house .window {
	position: absolute;
	height: 70px;
	width: 65px;
	background-color: #cccc00;
	border: 5px solid #3a1e12;
	bottom: 53px;
	left: 110px;
	box-shadow: 0 0 5px black;
}

.house .window .frame:nth-child(1) {
	position:...