JSFiddle - React, Tailwind, and code Playground

by Eve Bozh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="font-awesome-4.2.0/font-awesome-4.2.0/css/font-awesome.min.css">
<!-- Custom Styles for this Site -->
    

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src="Assets/Images/1.jpg" alt="First">
<div class="carousel-caption">
<h1>Example Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a class='btn btn-lg btn-primary' href='#' role='button'>Button [1]</a></p>
</div>
</div>
<div class="item">
<img src="Assets/Images/2.jpg" alt="Second">
<div class="carousel-caption">
<h1>Example Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a class='btn btn-lg btn-primary' href='#' role='button'>Button [2]</a></p>
</div>
</div>
<div class="item">
<img src="Assets/Images/3.jpg" alt="Third">
<div class="carousel-caption">
<h1>Example Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a class='btn btn-lg btn-primary' href='#' role='button'>Button [3]</a></p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

<script...

CSS

body {
    padding-bottom: 40px;
    color: #5a5a5a;
}

.carousel {
    height: 500px;
    margin-bottom: 60px;
}

.carousel-caption {
    z-index: 10;
}

.carousel .item {
    height: 500px;
    background-color: #777;
}

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

@media (min-width: 768px) {
    .carousel-caption p {
        margin-bottom: 20px;
        font-size: 21px;
        line-height: 1.4;
    }
}