JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://lorempixel.com/600/600/abstract');"></div>
            <div class="carousel-caption">
                 <h1>Text that I would like to stay</h1>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://lorempixel.com/600/600/business');"></div>
            <div class="carousel-caption"></div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://lorempixel.com/600/600/cats');"></div>
            <div class="carousel-caption"></div>
        </div>
    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<div class="main-text">
    <div class="col-md-12 text-center">
        <h1>
              <img src="http://clubeparacachorros.com.br/wp-content/uploads/2015/08/cachorro-urina-por-excitacao.jpg" /></h1>
        <h3>
            Lorem ipsum dolor sit amet,...

CSS

html, body {
    height: 100%;
}
.carousel, .item, .active {
    height: 100%;
    z-index:-1;
    
}
img{
  width:300px;
}
.carousel-inner {
    height: 100%;
}
.carousel-caption {
    padding-bottom: 475px;
}
/* Background images are set within the HTML using inline CSS, not here */
 .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    opacity: 0.9;
    top: 50px
}
footer {
    margin: 50px 0;
}
body {
    width: 100%;
    height: 100%;
}
html {
    width: 100%;
    height: 100%;
}
@media(min-width:767px) {
    .navbar {
        opacity: 0.6;
        -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
        transition: background .5s ease-in-out, padding .5s ease-in-out;
    }
    .top-nav-collapse {
        padding: 0;
    }
}
.intro-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}
.about-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}
.services-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}
.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}
.carousel > .item > h1 {
    color: #fff;
    position: absolute;
    top: 50px;
    width: 96.6667%;
}
.main-text {
    position: absolute;
    top: 50px;
    width: 96.66666666666666%;
    color: #FFF;
}