JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
	<div class="inner"></div>
</div>

CSS

@keyframes rotate{
	100%{
		transform:rotate(360deg);
	}
}
@-webkit-keyframes rotate{
	100%{
		transform:rotate(360deg);
	}
}

.outer,
.inner,
.outer:before,
.outer:after,
.inner:before{
	position:absolute;
}
.outer{
	top:200px;
	left:150px;
	transform-origin:100px 0;
	-webkit-animation:rotate linear infinite 4s;
	animation:rotate linear infinite 4s;
}
.inner{
	top:0;
	left:-50px;
	transform-origin:50px 0;
	-webkit-animation:rotate linear infinite 2s;
	animation:rotate linear infinite 2s;
}
.outer{
	top:200px;
	left:150px;
	transform-origin:100px 0;
}
.inner{
	top:0;
	left:-50px;
	transform-origin:50px 0;
}
.outer:before,
.outer:after,
.inner:before{
	content:"";
	top:0;
	width:10px;
	height:10px;
	margin:-5px 0 0 -5px;
	border-radius:50%;
}
.outer:before{
	left:0;
	background:#37a9d5;
}
.outer:after{
	left:100px;
	background:#d65236;
}
.inner:before{
	left:0;
	background:#4fbd83;
}