JSFiddle - React, Tailwind, and code Playground

by SurveillanceTips

HTML

<div id="hp" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#hp" data-slide-to="0" class="active"></li>
        <li data-target="#hp" data-slide-to="1"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <!-- Wrap slides 1 -->
        <div class="item active"></div>
        <!-- Wrap slides 2 -->
        <div class="item"></div>
    </div>
    <!-- codes for Controls follows -->
</div>

CSS

#hp {

    height: 250px;

    width: 100%;

    /*background-color: #171717;*/

    background: url(https://ununsplash.imgix.net/photo-1427348693976-99e4aca06bb9) no-repeat center center;

    background-size: cover;

    border-bottom: 1px solid #eee;

    color: #fff;

}