JSFiddle - React, Tailwind, and code Playground

by unknowne

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	
</head>
<style>
	html {
		overflow: hidden;
		user-select: none;
	}

	body {
		margin: 0;
		overflow: hidden;
		width: 100vw;
		height: 100vh;
	}

	img {
		pointer-events: none;
	}
</style>

<body>
	<div class="error-background">
		<div class='error-stars'></div>
		<div class='error-stars2'></div>
		<div class='error-stars3'></div>
	</div>

</body>

</html>

SCSS

@function multiple-box-shadow($n) {
	$value: "#{random(200)}vw #{random(200)}vh #FFF";
	@for $i from 2 through $n {
		$value: "#{$value} , #{random(200)}vw #{random(200)}vh #FFF";
	}

	@return unquote($value);
}
$shadows-small: multiple-box-shadow(700);
$shadows-medium: multiple-box-shadow(200);
$shadows-big: multiple-box-shadow(100);

.error-background {
	height: 100vh;
	width: 100vw;
	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
	overflow: hidden;
}
.error-stars {
	width: 0.1vmin;
	height: 0.1vmin;
	background: transparent;
	box-shadow: $shadows-small;
	animation: animStar 50s linear infinite;

	&:after {
		content: " ";
		position: absolute;
		top: 200vh;
		width: 0.1vmin;
		height: 0.1vmin;
		background: transparent;
		box-shadow: $shadows-small;
	}
}
.error-stars2 {
	width: 0.2vmin;
	height: 0.2vmin;
	background: transparent;
	box-shadow: $shadows-medium;
	animation: animStar 100s linear infinite;

	&:after {
		content: " ";
		position: absolute;
		top: 200vh;
		width: 0.2vmin;
		height: 0.2vmin;

		background: transparent;
		box-shadow: $shadows-medium;
	}
}
.error-stars3 {
	width: 0.3vmin;
	height: 0.3vmin;
	background: transparent;
	box-shadow: $shadows-big;
	animation: animStar 150s linear infinite;

	&:after {
		content: " ";
		position: absolute;
		top: 200vh;
		width: 0.3vmin;
		height: 0.3vmin;
		background: transparent;
		box-shadow: $shadows-big;
	}
}

@keyframes animStar {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-200vh);
	}
} ;