JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                  <img src="http://www.hutchtech.ca/images/backgrounds/hutch-communications-background4.jpg" class="d-block w-100" alt="...">
                  <div class="carousel-caption d-none d-md-block" style="padding-left:50px;">
                        <h1 style="font-size: 75px; font-weight: 700;">We Fix<br> What Matters</h1><br>
                        <p>We use edge technology to deliver high quality and<br> proffessional restoration services</p>
                      </div>

                      <div class="pic-sec">
                        <div class="pic">
                        <img src="https://via.placeholder.com/150" class="over-img">
                        <div class="caption">Water</div>
                       </div>
                       
                       <div class="pic">
                        <img src="https://via.placeholder.com/150" class="over-img">
                        <div class="caption">Water</div>
                       </div>
                       
                       <div class="pic">
                        <img src="https://via.placeholder.com/150" class="over-img">
                        <div class="caption">Water</div>
                       </div>
                       
                       <div class="pic">
                        <img src="https://via.placeholder.com/150" class="over-img">
                        <div class="caption">Water</div>
                       </div>
                      </div>
                        


</div>
            </div>
          </div>

CSS

img{
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  opacity: 25;
}

.carousel-item {
  position: relative;
}

.carousel-caption {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  color: white;
}

.over-img{
  /* position: absolute;
  top: 65%;
  left: 6.5%; */
  width : 85px;
  height: 85px;
}

.pic-sec {
  display: flex;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pic {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

.caption {
  float: left;
  clear: both;
  color: white;
}