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">
                    <a href="#pixar" class="selected"><img src="http://coolcarousels.frebsite.nl/c/28/img/small/pixar.jpg" /></a>
                    <a href="#bugs"><img src="http://coolcarousels.frebsite.nl/c/28/img/small/bugs.jpg" /></a>
                    <a href="#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, #thumbs a {
                position: relative;
            }
            #carousel img,
            #thumbs img {
                border: none;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            #carousel img.glare,
            #thumbs img.glare {
                width: 102%;
                height: auto;
            }

            #carousel span {
                width: 554px;
                height: 313px;
            }

            #thumbs-wrapper {
                padding: 20px 40px;
                position: relative;
            }
            #thumbs a {
               ...

JavaScript

$('#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: true,
                    circular: false,
                    auto: true,
                    items: {
                        visible: 1,
                        width: 200,
                        height: '56%'
                    },
                    scroll: {
                        fx: 'directscroll'
                    }
                });

                $('#thumbs').carouFredSel({
                    responsive: true,
                    circular: true,
                    infinite: true,
                    auto: {
                        play:true
                    },
                    scroll:
                    {
                        items: 1,
                        onBefore: function() {
                            
                            var pos = $("#thumbs").triggerHandler("currentPosition");
                           // alert( "The carousel is at item number " + pos );
                            

                        }
                         
                    },
                    prev: '#prev',
                    next: '#next',
                    items: {
                        visible: {
                            min: 2,
                            max: 6
                        },
                        width: 150,
                        height: '66%'
                    }
                });

                $('#thumbs a').click(function() {
                    $('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
                    $('#thumbs a').removeClass('selected');
                    $(this).addClass('selected');
                    return...