JSFiddle - React, Tailwind, and code Playground

HTML

<div class="review">
    <div class="review-tabs">
        <ul>
            <li class="review-btn" id="review-block-1">1</li>
            <li class="review-btn" id="review-block-2">2</li>
            <li class="review-btn" id="review-block-3">3</li>
            <li class="review-btn" 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 slideEl = $('.review-block');
    var slideBt = $('.review-btn');
    var slide = 1;
    slideBt.click(function () {
        slideEl.hide();
        slideBt.removeClass('active');
        $(this).addClass('active');
        $('.' + this.id).show();
    });
    function next() {
        if (slide > slideEl.length - 1) slide = 0;
        slideEl.hide();
        slideBt.removeClass('active');
        $(slideBt[slide]).addClass('active');
        $(slideEl[slide]).show().addClass('active');;
        slide++;
    }
    
    var delay = setInterval(next, 1000);
    
    $('.review').on('mouseenter',function(){
        clearInterval(delay);
        $(this).on('mouseleave',function(){
           delay = setInterval(next, 1000);
            })
    });
});