JSFiddle - React, Tailwind, and code Playground

by Luis Almeida

HTML

<div class="carousel">
        <i class="fas fa-chevron-left" id="prevBtn"></i>
        <i class="fas fa-chevron-right" id="nextBtn"></i>
        <div class="carousel-inner">
            <div class="slide-item">
                <div class="caption">
                    <h1>First Slide</h1>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                </div>
                <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="">
            </div>
            <div class="slide-item">
                <div class="caption">
                    <h1>Second Slide</h1>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                </div> <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="">
            </div>
            <div class="slide-item">
                <div class="caption">
                    <h1>Third Slide</h1>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                </div> <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="">
            </div>
        </div>
        <div class="dots">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </div>

SCSS

* {
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

img {
  width: 100%;
  height: 100%;
}
.carousel {
  position: relative;
  width: 992px;
  height: 400px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  .carousel-inner {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0px auto;
    .slide-item {
      position: relative;
      display: inline-block;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
      img {
        width: 992px;
        // height: 400px;
      }
      .caption {
        position: absolute;
        bottom: 1.5rem;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        border-radius: 4px;
        z-index: 99;
        color: #f3f3f3;
        line-height: 1.25;
        h1,
        h2,
        h3,
        h4 {
          font-size: 180%;
          font-weight: 400;
          margin: 0;
        }
        p {
          font-size: 100%;
          margin: 0;
        }
      }
    }
  }
  #prevBtn,
  #nextBtn {
    position: absolute;
    top: 50%;
    font-size: 2rem;
    color: black;
    color: #f3f3f3;
    opacity: 0.8;
    z-index: 99;
    cursor: pointer;
    &:hover {
      opacity: 1;
      transform: scale(1.1);
    }
  }
  #prevBtn {
    left: 7%;
  }
  #nextBtn {
    right: 7%;
  }
  .dots {
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 9;
    // border: 1px solid blue;
    .dot {
      display: inline-block;
      height: 5px;
      width: 30px;
      border-radius: 3px;
      margin: 0.25rem;
      background-color: #918b8b;
      cursor: pointer;
    }
    .active {
      background-color: #ebe5e5;
    }
  }
}

.container {
  width: 100%;
 ...