JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

SCSS

html, body {
	height: 100%;
	width: 100%;
}
li {
	list-style:none;
	height: 30px;
	width: 30px;
	display: block;
	background: cyan;
	position: absolute;
	bottom: -160px;
	animation: bubbles 5s linear infinite;
			&:nth-child(2){
				width: 100px;
				height: 100px;
				animation-delay: 3s;
				left: 50%;
			}
			&:nth-child(3) {
				height: 40px;
				width: 40px;
				animation-delay: 4s;
				left: 90%; 
			}
}

@keyframes bubbles {
 	0% {transform: translateY(0) rotate(0)};
 	100%{transform: translateY(-1200px) rotate(600deg)};
}
.container {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
}