JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.humanstudio.com/web/chris/blind/js/jquery.fancybox-1.3.4.pack.js"></script>
<a id="various2" href="#inline2">Click me</a>    

    
<div style="display: none;">

<div id="inline2" style="width:640px; height:450px;">
    
<div id="viewport-02">
    <ul>
        <li><iframe src="http://player.vimeo.com/video/13371022?api=1title=0&amp;byline=0&amp;portrait=0" width="640" height="360" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe></li>
        <li><iframe src="http://player.vimeo.com/video/15320768?api=1title=0&amp;byline=0&amp;portrait=0" width="640" height="360" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
    </ul>
</div>

<div id="Next">Next</div>
<div id="Previous">Prev</div></div>
</div>
</div>

CSS

/* CAROUSEL */

#viewport-02
{
position:absolute;top:0;left:0;padding:0;margin:0; 
width:640px;height:450px;     
float:left;overflow:hidden;
}
#viewport-02 ul
{
position:absolute;top:0;left:0;padding:0;margin:0; 
}
#viewport-02 li
{
    width: 640px; 
    height:360px; 
    float: left; 
    list-style: none; 
    background-color: #000;
    margin: 0;
}
#Previous
{
    cursor: pointer;
    position:absolute;
    top:400px;

}
#Next
{
    position:absolute;
    top:400px;
    left:100px;
    cursor: pointer;
}

/* FANCYBOX */

#fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    display: none;
}

#fancybox-tmp {
    padding: 0;
    margin: 0;
    border: 0;
    overflow: auto;
    display: none;
}

#fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
}

#fancybox-outer {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
}

#fancybox-content {
    width: 0;
    height: 0;
    padding: 0;
    outline: none;
    position: relative;
    overflow: hidden;
    z-index: 1102;
    border: 0px solid #fff;
}


#fancybox-close {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 1103;
    display: none;
    background:#fff;    
    margin: 5px 5px 0 0;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color:#000;
    padding:5px 10px 5px 10px;
}

JavaScript

//CAROUSEL
            
jQuery(document).ready(function(){
                jQuery('#slider-stage').carousel('#previous', '#next');
                jQuery('#viewport-02').carousel('#Previous', '#Next');  
            });
            
//FANCYBOX
    
            $(document).ready(function() {
            
            $("#various2").fancybox({
                'padding'            : 0,
                'autoScale'            : false,
                'transitionIn'        : 'fade',
                'transitionOut'        : 'fade',     
                
//LOAD VIMEO 2ND TIME
                            
'onComplete': function() { 
mySRC = $('#inline2 iframe').attr('src'); 
}, 

'onClosed': function() { 
$('#inline2 iframe').attr('src',mySRC); 

} 

}); 
});


//CAROUSEL JS FILE

jQuery.fn.carousel = function(previous, next, options){
    var sliderList = jQuery(this).children()[0];
    
    if (sliderList) {
        var increment = jQuery(sliderList).children().outerWidth("true"),
        elmnts = jQuery(sliderList).children(),
        numElmts = elmnts.length,
        sizeFirstElmnt = increment,
        shownInViewport = Math.round(jQuery(this).width() / sizeFirstElmnt),
        firstElementOnViewPort = 1,
        isAnimating = false;
        
        for (i = 0; i < shownInViewport; i++) {
            jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
            jQuery(sliderList).append(jQuery(elmnts[i]).clone());
        }
        
        jQuery(previous).click(function(event){
            $("iframe").each(function() {
                this.contentWindow.postMessage('{ "method": "pause" }', "http://player.vimeo.com");
            });
            if (!isAnimating) {
                if (firstElementOnViewPort == 1) {
                    jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
                    firstElementOnViewPort = numElmts;
                }
                else {
                   ...