JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--this is the carousel-->
<div class="container">
<h2>Friends and I Carousel</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.unsplash.com/photo-1475483768296-6163e08872a1?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="dance">
<div class="carousel-caption">
<h3>My girlfriend and I at a dance.</h3>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/la.jpg" alt="padre">
<div class="carousel-caption">
<h3>Friends and I at a bar in South Padre</h3>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="oldpic">
<div class="carousel-caption">
<h3>A picture of me frshman year</h3>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="tailgate">
<div class="carousel-caption">
<h3>My girlfriend and I at a tailgate.</h3>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/img_chania.jpg" alt="topgolf">
<div class="carousel-caption">
<h3>A picture of me at Top Golf</h3>
</div>
</div>
<div class="item">
<img...
CSS
h1{
color: aqua;
font-size: 40px;
text-align: center;
font-style: italic;
}
div.carousel div.item > img {
width: 100%;
height: 100%;
}