JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/zurb/twentytwenty/master/js/jquery.twentytwenty.js"></script>
<script src="https://rawgithub.com/zurb/twentytwenty/master/js/jquery.event.move.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/zurb/twentytwenty/master/css/twentytwenty.css">
<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container current-item" data-image-num="1">
        <img src="http://placehold.it/1024x760&text=1+BEFORE" />
        <img src="http://placehold.it/1024x768&text=1+AFTER" />
    </div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container" data-image-num="2">
        <img src="http://placehold.it/1024x760&text=2+BEFORE" />
        <img src="http://placehold.it/1024x768&text=2+AFTER" />
    </div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container" data-image-num="3">
        <img src="http://placehold.it/1024x760&text=3+BEFORE" />
        <img src="http://placehold.it/1024x768&text=3+AFTER" />
    </div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
    <div class="image-compare-set twentytwenty-container" data-image-num="4">
        <img src="http://placehold.it/1024x760&text=4+BEFORE" />
        <img src="http://placehold.it/1024x768&text=4+AFTER" />
    </div>
</div>

<div class="image-compare-nav owl-carousel owl-theme">
    <div class="owl-wrapper">
        <div class="owl-item">
            <a href="#" style="background-image:url(http://placehold.it/300&text=1)" class="item" data-image-num="1"></a>
        </div>
        <div class="owl-item">
            <a href="#" style="background-image:url(http://placehold.it/300&text=2)" class="item" data-image-num="2"></a>
        </div>
        <div class="owl-item">
            <a href="#" style="background-image:url(http://placehold.it/300&text=3)" class="item"...

CSS

.twentytwenty-container {
    width:500px;
    margin:1em 0;
}
.owl-item {
    float:left;
    width:100px;
}
.image-compare-nav a {
    display:inline-block;
    width:60px;
    height:60px;
    border:4px solid #877874;
    background-size:cover;
    background-position:center;
}
.image-compare-nav a:hover {
    border-color:#61504d;
}

JavaScript

$(".twentytwenty-container").twentytwenty();

$(".image-compare-nav a").click(function() {
   // Hides all images.
   $(".twentytwenty-container").hide();

   // Shows appropriate one.
   var imageNum = $(this).attr('data-image-num');
	$('.twentytwenty-container[data-image-num="' + imageNum + '"]').show();
});