JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/assets/css/custom.css">
<div id="bigPicture">
    <img src="http://owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg">
</div>

<div id="owl-demo" class="owl-carousel">
  <a class="item link" data-img-full="http://owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"><img src="http://owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></a>
  <a class="item link" data-img-full="http://owlgraphic.com/owlcarousel/demos/assets/fullimage2.jpg"><img src="http://owlgraphic.com/owlcarousel/demos/assets/fullimage2.jpg"></a>
  <a class="item link" data-img-full="http://owlgraphic.com/owlcarousel/demos/assets/fullimage3.jpg"><img src="http://owlgraphic.com/owlcarousel/demos/assets/fullimage3.jpg"></a>
</div>
      
      <div id="owl-demo" class="owl-carousel">
  <a class="item link" data-img-full="http://owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"><img src="http://owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></a>
  <a class="item link" data-img-full="http://owlgraphic.com/owlcarousel/demos/assets/fullimage2.jpg"><img src="http://owlgraphic.com/owlcarousel/demos/assets/fullimage2.jpg"></a>
  <a class="item link" data-img-full="http://owlgraphic.com/owlcarousel/demos/assets/fullimage3.jpg"><img src="http://owlgraphic.com/owlcarousel/demos/assets/fullimage3.jpg"></a>
</div>
      
      <div id="owl-demo" class="owl-carousel">
  <a class="item link" data-img-full="http://owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"><img src="http://owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></a>
  <a class="item link" data-img-full="http://owlgraphic.com/owlcarousel/demos/assets/fullimage2.jpg"><img...

CSS

#bigPicture {
    width: 90%;
    margin: 24px auto;
    
    border-radius: 6px;
    overflow: hidden;
    
    background-color: #ffd800;
}

#bigPicture img {
    width: 100%;
    height: auto;
}

#owl-demo {
    width: 90%;
    max-width: 640px;
    margin: 0 auto;
}

#owl-demo .item {
  display: block;
  cursor: pointer;
  background: #ffd800;
  padding: 4px;
  margin: 5px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
}

#owl-demo .owl-item img {
    width: 100%;
    height: auto;    
}

#owl-demo .item:hover{
  background: #F2CD00;
}

JavaScript

$(document).ready(function() {
 
  $(".owl-carousel").owlCarousel({
    items : 20
  });
   
    
  var bigPictureIMG = $('#bigPicture img');
    
  $('.link').on('click', function(event){
    var $this = $(this);
      
    bigPictureIMG.attr('src', $this.data('imgFull'));
      
    if($this.hasClass('clicked')){
      $this.removeAttr('style').removeClass('clicked');
    } else{
      $this.css('background','#7fc242').addClass('clicked');
    }
  });
 
});