JSFiddle - React, Tailwind, and code Playground
HTML
<div class="balloon-cage2">
<div class="balloon-blue-r">br</div>
</div>
CSS
.balloon-cage2 {
display:block;
position:relative;
left:400px;
}
.balloon-green-r {
background: url("http://doggydish.com/PROJECTS/balloon-green-r.svg");
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: right;
-webkit-animation: rotateyr 6s linear infinite;
-moz-animation: rotateyr 6s linear infinite;
animation: rotateyr 6s linear infinite;
margin: 0 auto;
position: absolute;
background-color:#1abc9c;
}
.balloon-green-l {
background: url(http://doggydish.com/PROJECTS/balloon-green-l.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: left;
-webkit-animation: rotateyl 6s linear infinite;
-moz-animation: rotateyl 6s linear infinite;
animation: rotateyl 6s linear infinite;
margin: 0 auto;
position: absolute;
}
.balloon-blue-l {
background: url(http://doggydish.com/PROJECTS/balloon-blue-l.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: left;
-webkit-animation: rotateyl2 6s linear infinite;
-moz-animation: rotateyl2 6s linear infinite;
animation: rotateyl2 6s linear infinite;
margin: 0 auto;
position: absolute;
}
.balloon-blue-r {
background: url(http://doggydish.com/PROJECTS/balloon-blue-r.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: right;
-webkit-animation: rotateyr2 6s linear infinite;
-moz-animation: rotateyr2 6s linear infinite;
animation: rotateyr2 6s linear infinite;
margin: 0 auto;
position: absolute;
}
@-webkit-keyframes rotateyr {
0% {
-webkit-transform: rotateY(0deg);
...