JSFiddle - React, Tailwind, and code Playground

HTML

<div class="garden">
    <div class="point left">&#9668;</div>
        <div id="trees" class="trees">
            <div id="apple">Apple</div>
            <div id="cherry">Cherry</div>
            <div id="pear">Pear</div>
            <div id="oak">Oak</div>
            <div id="fir">Fir</div>
        </div>
    <div class="point right">&#9658;</div>
</div>

CSS

.garden { position: absolute; top: 135px; left: 150px; }
.garden > div { display:inline-block; }
.trees { width:550px; height:53px; position:relative; font-size:70%; }
.point { width: 16px; height: 15px; background: url(/point-sprite.png) no-repeat;}
.point.left  { background-position: -16px 0; }
.point:hover { background-position: 0 0; }
.point.right { background-position: -32px 0; }
.point:hover { background-position: -48px 0 }
.trees > div span { min-width:50px; position:absolute; display:inline-block; top:25px; left:15px; text-align:center; }

#apple, #cherry, #pear, #oak, #fir { position: absolute; color: #0094d9; }
#apple { top: 10px; }
#cherry { top: 2px; left: 90px; }
#pear { left: 180px; }
#oak { left: 280px; }
#fir { top: 2px; left: 373px; }

JavaScript

$(document).ready(function () {
     
    function changePositionLeft() {
        
        var trees = $('#trees');
        
        trees.children().each( function(index, child) {
            if (index == 0) {
                $(child).animate(trees.children().last().position());
            }
            else {
                $(child).animate(trees.children().eq(index - 1).position());
            }
        });

        trees.children().first().appendTo(trees);        
    }

    $(".point.left").click(function() {
        changePositionLeft();
    });
});