JSFiddle - React, Tailwind, and code Playground

by James Gill

HTML

<div class="tree">
    <div class="branch-container">
        <div class="branch" id="branch1"></div>
        <div class="branch" id="branch2"></div>
        <div class="branch" id="branch3"></div>
        <div class="branch" id="branch4"></div>
        <div class="branch" id="branch5"></div>
        <div class="branch" id="branch6"></div>
    </div>
    <div class="trunk"></div>
</div>

CSS

.tree{
    
}
.box{
    width:50px; height:50px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-animation: 10s ease-in-out 0s normal none infinite swing;
    -moz-transform-origin: right bottom;
}



@-moz-keyframes swing1 {
 0% {
   -moz-transform: rotate(5deg);
 }
 50% {
   -moz-transform: rotate(-5deg);
 }
100%{
   -moz-transform: rotate(5deg);
 }
}