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://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--START OF TOPMOST CAROUSEL-->
        <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">
                                        <!-- Indicators -->
                                        <ol class="carousel-indicators">
                                          <li data-target="#carousel-example-generic" data-slide-number="0" class="active"></li>
                                          <li data-target="#carousel-example-generic" data-slide-number="1"></li>
                                          <li data-target="#carousel-example-generic" data-slide-number="2"></li>
                                        </ol>
                                        <!-- Carousel items -->
                                        <div class="carousel-inner"><!--this is for making the image size uniform-->
                                            <div class="active item" data-slide-number="0">
                                                <img src="http://placehold.it/1200x546&text=one">
                                                <div class="absolute-div">
                                                    <div class="carousel-caption">
                                                        <h3>HEADER GOES HERE</h3>
                                                        
                                                    </div>
     ...

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;
}

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());
                });
});