JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div id="logowrap">
    <div>
        <div class="yellow"></div>
        <div class="blue"></div>
        <div class="orange"></div>
        <div class="green"></div>
    </div>
</div>

CSS

#logowrap{
    text-align:center;
    margin-top:200px
}
#logowrap>div{
    display:inline-block;
    position:relative;
}
#logowrap>div div{
    position:absolute;
}

#logowrap .yellow, #logowrap .blue, #logowrap .orange{
    left:15px;
    top:17.5px;
    width:30px;
    height:35px;
}
#logowrap .green{
    width:60px;
    height:70px;
    background-color:green;
}
#logowrap .yellow{
    background-color:yellow;
    -webkit-animation: yellow 5s;
    -webkit-animation-iteration-count: infinite;
}
#logowrap .orange{
    background-color:orange;
    -webkit-animation: orange 5s;
    -webkit-animation-iteration-count: infinite;
}
#logowrap .blue{
    background-color:blue;
    -webkit-animation: blue 5s;
    -webkit-animation-iteration-count: infinite;
}


@-webkit-keyframes yellow
{
	from {
		transform: rotate(0deg)
		           translate(150px)
		           rotate(0deg);
	}
	to {
		transform: rotate(360deg)
		           translate(0px) 
		           rotate(-360deg);
	}
}
@-webkit-keyframes blue
{
	from {
		transform: rotate(120deg)
		           translate(150px)
		           rotate(-120deg);
	}
	to {
		transform: rotate(480deg)
		           translate(0px) 
		           rotate(-480deg);
	}
}
@-webkit-keyframes orange
{
	from {
		transform: rotate(240deg)
		           translate(150px)
		           rotate(-240deg);
	}
	to {
		transform: rotate(600deg)
		           translate(0px) 
		           rotate(-600deg);
	}
}