JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css">
<div id="navbar" class="regions">
    <div class="content slide-tabs">
        <div id="rome" class="selected"><a href="javascript:void;">Rome</a>
        </div>
        <div id="venice"><a href="javascript:void;">Venice</a>
        </div>
        <div id="milan"><a href="javascript:void;">Milan</a>
        </div>
        <div id="vatican"><a href="javascript:void;">The Vatican</a>
        </div>
    </div>
</div>
<div id="hero">
    <div class="carousel">
        <div id="rome-tab" class="tab">
            <div class="content">
                 <h3>Rome</h3>

            </div>
        </div>
        <div id="venice-tab" class="tab">
            <div class="content">
                 <h3>Venice</h3>

            </div>
        </div>
        <div id="milan-tab" class="tab">
            <div class="content">
                 <h3>Milan</h3>

            </div>
        </div>
        <div id="vatican-tab" class="tab">
            <div class="content">
                 <h3>The Vatican</h3>

            </div>
        </div>
    </div>
</div>

CSS

.selected {
    background-color:blue;
    color:white;
    display:block;
}
.selected a {
    text-decoration: none;
    color:white;
}
.slide-tabs div {
    width:90px;
    float:left;
    text-align:center;
}
#hero {
    clear:both;
}
}

JavaScript

$('.carousel').slick({
    arrows: true,
    dots: true
});
$('.carousel').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    $('.slide-tabs div').removeClass('selected');
    $('.slide-tabs div:nth-child(' + (nextSlide + 1) + ')').addClass('selected');
});
$('.slide-tabs div a').on('click', function (e) {
    e.preventDefault();
    var slideNo = $(this).parent().index();
    console.log('trying to switch to slide ' + slideNo);
    $('.carousel').slick('slickGoTo', slideNo);	
});