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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="monitor" class="carousel slide" data-ride="carousel" data-identifier="chart1,chart2,chart3" data-interval="20000">
<div class="carousel-inner" role="listbox">
<div class="item active" >
<div class="row">
<div class="container-fluid">
<div class="col-sm-12 col-lg-6 col-xl-3 chart">
<div class="panel panel-default shadow-jumbo">
<div class="panel-body">
<!--div class="caption">Customer orders weekly stat <span class="label label-default">Orders/week</span>
</div-->
<div id="chart1" style="width: 100%;height:400px;"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-xl-3 chart">
<div class="panel panel-default shadow-jumbo">
<div class="panel-body">
<div id="chart2" style="width: 100%;height:400px;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container-fluid">
<div class="col-sm-12 col-lg-6 col-xl-3 chart">
<div class="panel panel-default shadow-jumbo">
<div class="panel-body">
<!--div class="caption">Customer orders weekly stat <span class="label label-default">Orders/week</span>
</div-->
<div id="chart3" style="width: 100%;height:400px;"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-xl-3 chart">
...