JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body">
                    
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

CSS

#gallery_hotel     {margin:0 auto; position:relative; width:601px}
    #gallery_hotel img {margin:0 auto; display:block}

    #thumbs_hotel      {overflow:hidden; width:524px; margin:30px auto 0}
    #thumbs_hotel img  {float:left; margin:1px; cursor:pointer}
    
    
    /* added css */
    .imageHotel span.active {
      font-weight: bold;
      border: 1px solid;
    }

    span {
        cursor: pointer;
        padding: 4px;
        top: 6px;
        position: relative;
    }

JavaScript

htmlData = '';
    htmlData = 'Photos<a href="#" id="hotel_photo" data-hotel-code="nases">(Click to View)</a><br><br>';
    htmlData += '<div class="imageHotel"></div>';

    $('#myModal').find('.modal-body').html(htmlData);

    $(".imageHotel").hide();
    $(document).on("click", "#hotel_photo", function(event){
        $(".imageHotel").toggle();
        event.preventDefault();
        htmlData += '<div id="gallery_hotel">';
    
            htmlData = '<img id="largeImage" src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg" />';
        
        htmlData += '</div>';
    

        htmlData += '<div id="thumbs_hotel" class="owl-carousel">';

            htmlData += '<div class="item"><img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" /></div>';
            htmlData += '<div class="item"><img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg" /></div>';
            htmlData += '<div class="item"><img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" /></div>';
            htmlData += '<div class="item"><img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_04_thumb.jpg" /></div>';
            htmlData += '<div class="item"><img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_05_thumb.jpg" /></div>';
             htmlData += '<div class="item"><img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg" /></div>';
             htmlData += '<div class="item"><img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.jpg" /></div>';
            htmlData += '<div class="item"><img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_04_thumb.jpg" /></div>';
            htmlData += '<div class="item"><img src="http://www.workshop.rs/demo/gallery-in-4-lines/images/image_05_thumb.jpg" /></div>';
             htmlData += '<div class="item"><img...