JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cssload-dots">
	<div class="cssload-dot"></div>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<filter id="goo">
			<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="5" ></feGaussianBlur>
		</filter>
	</defs>
</svg>

CSS

.cssload-dots {
	filter: url(#goo);
		-o-filter: url(#goo);
		-ms-filter: url(#goo);
		-webkit-filter: url(#goo);
		-moz-filter: url(#goo);
}

.cssload-dot {
	width: 30px;
	height: 30px;
	background: black;
  transition: translateY, 2s;
	transform: translateY(40px);
		-o-transform: translateY(40px);
		-ms-transform: translateY(40px);
		-webkit-transform: translateY(40px);
		-moz-transform: translateY(40px);
}
.cssload-dot:hover {
	transform: translateY(0px);
		-o-transform: translateY(0px);
		-ms-transform: translateY(0px);
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
}