JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <div class="container">
        <div id="main_area">
                <!-- Slider -->
                <div class="row">
                    <div id="slider">
                        <!-- Top part of the slider -->
                        <div class="row">
                            <div id="carousel-bounding-box">
                                <div class="carousel slide" id="myCarousel2">
                                    <!-- Carousel items -->
                                    <div class="carousel-inner">
                                        <div class="active item" data-slide-number="0">
                                        <img src="http://placehold.it/1200x546&text=one"></div>

                                        <div class="item" data-slide-number="1">
                                        <img src="http://placehold.it/1200x546&text=two"></div>

                                        <div class="item" data-slide-number="2">
                                        <img src="http://placehold.it/1200x546&text=three"></div>

                                        <div class="item" data-slide-number="3">
                                        <img src="http://placehold.it/1200x546&text=four"></div>

                                        <div class="item" data-slide-number="4">
                                        <img src="http://placehold.it/1200x546&text=five"></div>


                                    </div><!-- Carousel nav -->
                                      <a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left"...

CSS

#myCarousel {
                margin-top: 30px;
            }
            .thumbnail {
                border: none;
            }
            .thumbnail-modifier {
                margin-bottom: 0px;
            }
            .thumbnails {
                display: inline-flex;
                width: 100%;
            }
            .thumbnails-center {
                display: flex;
                margin: 0 auto;
            }
            .cursor {
                cursor: pointer;
            }
            .row-fluid {
                display: inline-flex;
                width: 100%;
            }
            #myCarousel3 {
                margin-top: 20px;
                margin-bottom: 50px;
            }
            .row-center {
                display: flex;
                margin: 0 auto;
            }
            .carousel-control-modifier {
                background-image: none !important;
                color: black !important;
            }
            
            .thin {
    max-width:150px;    
}

.carousel > .window {
    overflow: hidden;
    position: relative;
    height: 300px;
}

/*
    This is the item wrapper,
    it will be animated.
*/
.carousel ul {
    list-style: none;
    height: 10000px;
    top: 0;
    left: 0;
    position: absolute;
    padding: 0px;
}

/*
    These are the items
*/
.carousel li {
    margin: 3px 0 0;
}
.prev, .next {
    font-size: 30px;
    width: 100%;
    position: relative;
    left: 50%;
    margin-left: -15px;
}
.carousel li:first-child {
    margin: 0;
}

JavaScript

jQuery(document).ready(function($) {
                $('#myCarousel3').carousel({
                    interval: 1000000
                });

                $('#myCarousel').carousel({
                        interval: 3000
                });
                $('#myCarousel2').carousel({
                        interval: 2000
                });

                $('#carousel-text').html($('#slide-content-0').html());

                //Handles the carousel thumbnails
                $('[id^=carousel-selector-]').click( function(){
                        var id_selector = $(this).attr("id");
                        var id = id_selector.substr(id_selector.length -1);
                        var id = parseInt(id);
                        $('#myCarousel').carousel(id);
                });


                // When the carousel slides, auto update the text
                $('#myCarousel').on('slid', function (e) {
                        var id = $('.item.active').data('slide-number');
                        $('#carousel-text').html($('#slide-content-'+id).html());
                });
        });
        
        
        !function ($) {

    var is,
		transition;

	// from valentine
	is = {
		fun: function (f) {
			return typeof f === 'function';
		},
		arr: function (ar) {
			return ar instanceof Array;
		},
		obj: function (o) {
			return o instanceof Object && !is.fun(o) && !is.arr(o);
		}
	};

	/*
		Based on Bootstrap
		Mozilla and Webkit support only
	*/
	transition = (function () {
		var st = document.createElement('div').style,
			transitionEnd = 'TransitionEnd',
			transitionProp = 'Transition',
			support = st.transition !== undefined ||
				st.WebkitTransition !== undefined ||
				st.MozTransition !== undefined;

		return support && {
			prop: (function () {
				if (st.WebkitTransition !== undefined) {
					transitionProp = 'WebkitTransition';
				} else if (st.MozTransition !== undefined) {
					transitionProp = 'MozTransition';
				}
				return...