JSFiddle - React, Tailwind, and code Playground

HTML

<div class="review">
    <div class="review-tabs">
        <ul>
            <li id="review-block-1">1</li>
            <li id="review-block-2">2</li>
            <li id="review-block-3">3</li>
            <li id="review-block-4">4</li>
        </ul>
    </div>
    <div class="review-block review-block-1">review-block-1</div>
    <div class="review-block review-block-2">review-block-2</div>
    <div class="review-block review-block-3">review-block-3</div>
    <div class="review-block review-block-4">review-block-4</div>
</div>

CSS

.review-tabs li {
    cursor: pointer;
}
.review-tabs li:hover, .review-tabs li.active {
    font-weight: bold;
}
.review-block {
    display: none;
}
.review-block-1 {
    display: block;
}

JavaScript

$(document).ready(function() {
    var timer = null;
    var hover = false;

    $(".review").hover(function(){
        hover = true;
        clearTimeout(timer);
    });
    
    $(".review").mouseleave(function(){
        hover = false;
        timer = setTimeout(rotator, 3000);
    });
    
    function rotator () {
        if (hover == true) return;
        var a = $(".review-tabs li.active");
        if (a.length) {
            a = a.removeClass("active").next();
            if (a.length == 0) {
                a = $(".review-tabs li").first();
            }
            a = a.addClass("active");

        } else {
            a = $(".review-tabs li").first().addClass("active");
        }

        var reviewId = $(".review-tabs li.active").attr("id");
        $(".review-block").hide();
        $("."+reviewId).show();

        timer = setTimeout(rotator, 3000);
    }

    rotator ();

    $(".review-tabs li").click(function(){
        $(".review-tabs li").removeClass("active");
        $(this).addClass("active");
        var reviewId = $(".review-tabs li.active").attr("id");
        $(".review-block").hide();
        $("."+reviewId).show();
    });
});