JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://coolcarousels.frebsite.nl/js/jquery.carouFredSel.js"></script>
<script src="http://coolcarousels.frebsite.nl/js/site.js"></script>
<div id="c-carousel">
        <div id="wrapper">
            <div id="carousel-wrapper">
                <img id="shadow" src="http://coolcarousels.frebsite.nl/c/28/img/gui/carousel_shadow.png" />
                <div id="carousel">
                    <span id="pixar"><img src="http://coolcarousels.frebsite.nl/c/28/img/large/pixar.jpg" /></span>
                    <span id="bugs"><img src="http://coolcarousels.frebsite.nl/c/28/img/large/bugs.jpg" /></span>
                    <span id="cars"><img src="http://coolcarousels.frebsite.nl/c/28/img/large/cars.jpg" /></span>
                    <span id="incred"><img src="http://coolcarousels.frebsite.nl/c/28/img/large/incred.jpg" /></span>
                    <span id="monsters"><img src="http://coolcarousels.frebsite.nl/c/28/img/large/monsters.jpg" /></span>
                    <span id="nemo"><img src="http://coolcarousels.frebsite.nl/c/28/img/large/nemo.jpg" /></span>
                    <span id="rat"><img src="http://coolcarousels.frebsite.nl/c/28/img/large/rat.jpg" /></span>
                    <span id="toystory"><img src="http://coolcarousels.frebsite.nl/c/28/img/large/toystory.jpg" /></span>
                    <span id="up"><img src="http://coolcarousels.frebsite.nl/c/28/img/large/up.jpg" /></span>
                    <span id="walle"><img src="http://coolcarousels.frebsite.nl/c/28/img/large/walle.jpg" /></span>
                </div>
            </div>
            <div id="thumbs-wrapper">
                <div id="thumbs">
                    <img src="http://coolcarousels.frebsite.nl/c/28/img/small/pixar.jpg" id="_pixar" />
                    <img src="http://coolcarousels.frebsite.nl/c/28/img/small/bugs.jpg"  id="_bugs" />
                    <img src="http://coolcarousels.frebsite.nl/c/28/img/small/cars.jpg" id="_cars"  />
                    <img...

CSS

#c-carousel {
                height: 100%;
                padding: 0;
                margin: 0;
            }
            #c-carousel {
                background: url(http://coolcarousels.frebsite.nl/c/28/img/gui/bg_glare.png) top center no-repeat #bcc;
            }
            html > #c-carousel {
                min-height: 600px;
            }
            #c-carousel * {
                font-family: Arial, Geneva, SunSans-Regular, sans-serif;
                font-size: 14px;
                color: #333;
                line-height: 22px;
            }

            #wrapper {
                position: absolute;
                width: 50%;
                left: 25%;
                top: 50px;
            }
            #carousel-wrapper {
                padding-bottom: 10px;
                position: relative;
            }
            #carousel, #thumbs {
                overflow: hidden;
            }
            #carousel-wrapper .caroufredsel_wrapper {
                border-radius: 10px;
                box-shadow: 0 0 5px #899;
            }

            #carousel span, #carousel img,
            #thumbs a, #thumbs img  {
                display: block;
                float: left;
            }
            #carousel span, #carousel a,
            #thumbs span  {
                
            }
            #carousel img,
            {
                border: none;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            #thumbs img {
                border: none;
                width: 100%;
                height: 100%;
                position: relative;
                top: 0;
                left: 0;
                
                
                border: 2px solid #899;
                width: 150px;
                height: 100px;
                margin: 0 10px;
                overflow: hidden;
                border-radius: 10px;
   ...

JavaScript

/*  function highlight( items ) {
                items.filter(":eq(0)").css({
                    backgroundColor: "#ff9",
                    width    : 150,
                    height    : 100,
                  //margin    : 7 
                });
                return items;
            }
            function unhighlight( items ) {
                items.css({
                    backgroundColor: "#fff",
                    
                   // margin    : 27
                });
                return items;
            }

*/ 

$('#carousel span').append('<img src="http://coolcarousels.frebsite.nl/c/28/img/gui/carousel_glare.png" class="glare" />');
                $('#thumbs a').append('<img src="http://coolcarousels.frebsite.nl/c/28/img/gui/carousel_glare_small.png" class="glare" />');

                
                $('#carousel').carouFredSel({
                    responsive: false,
                    circular: false,
                    auto: false,
                    items: {
                        visible: 1,
                        width: 540,
                        height: '56%'
                    },
                    scroll: {
                        fx: 'directscroll'
                    }
                });

                $('#thumbs').carouFredSel({
                    responsive: true,
                    circular: true,
                    infinite: true,
                    
                    
                    
                    
                    auto: {
                                play:true,
                                
                                onBefore    : function( data ) {
                                    //highlight( data.items.visible );
                                    
                                    var cur__id ;
                                    cur__id = "#_"+data.items.visible.eq(0).attr("id").split('_').pop();
                                    $('#carousel').trigger('slideTo',...