JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css">
<link rel="stylesheet" href="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
<div class="container">
    <div class="carousel" id="js-carousel">
        <div class="item">
            <label for="prod01" class="product">
                <input type="radio" id="prod01" name="pack" class="product-check">
                <img src="http://placehold.it/150x175?text=1" alt="" class="product-img">
            </label>
        </div>
        <div class="item">
            <label for="prod02" class="product">
                <input type="radio" id="prod02" name="pack" class="product-check">
                <img src="http://placehold.it/150x175?text=2" alt="" class="product-img">
            </label>
        </div>
        <div class="item">
            <label for="prod03" class="product">
                <input type="radio" id="prod03" name="pack" class="product-check">
                <img src="http://placehold.it/150x175?text=3" alt="" class="product-img">
            </label>
        </div>
        <div class="item">
            <label for="prod04" class="product">
                <input type="radio" id="prod04" name="pack" class="product-check">
                <img src="http://placehold.it/150x175?text=4" alt="" class="product-img">
            </label>
        </div>
    </div>
</div>

CSS

.container {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}
.product {
    display: block;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.product.active {
    border: 1px solid blue;
}
.product-check {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
.owl-item {
    float: left;
}

.owl-controls {
    display: none;
}

JavaScript

$('#js-carousel').owlCarousel({
    autoWidth: true,
    center: false,
    items: 3,
    loop: false,
    margin: 10,
    nav: false
});

// check if raio is checked
$('input[name=pack]').on('change', function() {
    
   if( $(this).is(':checked') ) {
       
       if( $(this).parent().hasClass('active') ) {
           
           $(this).parent().removeClass('active');
           
       } else {
           
           $(this).parent().addClass('active');
        
       }
           
   }
});