JSFiddle - React, Tailwind, and code Playground

HTML

<!-- one slider -->
    <div class="header_slider">
      <div>
        <div class="header_slider__block">
          <img src="slick/img/1.jpg" alt="#" class="slider__img">
          <div class="header-slider__content">
            <div class="container">
              <h2 class="slider__title">Header 1</h2>
              <p class="slider__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima consectetur
                aspernatur dolore beatae, repellat vero repellendus obcaecati perferendis, aliquid saepe.</p>
            </div>
            <!-- /.container -->
          </div>
          <!-- /.my-slider__content -->
        </div>
      </div>
      <div>
        <div class="header_slider__block">
          <img src="slick/img/2.jpg" alt="#" class="slider__img">
          <div class="header-slider__content">
            <div class="container">
              <h2 class="slider__title">Header 2</h2>
              <p class="slider__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, odit temporibus
                non
                libero eligendi reprehenderit deleniti tempore? Dolorum, fugit, labore.</p>
            </div>
            <!-- /.container -->
          </div>
          <!-- /.my-slider__content -->
        </div>
      </div>
      <div>
        <div class="header_slider__block">
          <img src="slick/img/3.jpg" alt="#" class="slider__img">
          <div class="header-slider__content">
            <div class="container">
              <h2 class="slider__title">Header 3</h2>
              <p class="slider__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quia, possimus
                aperiam eos voluptas in cumque rerum nobis dolorem quod.</p>
            </div>
            <!-- /.container -->
          </div>
          <!-- /.my-slider__content -->
        </div>
      </div>
    </div>
    <!-- /.header_slider -->

CSS

.header_slider {
  max-width: 100%;
  height: auto;
  margin: 0;
}

.header_slider__block {
  margin: 0px;
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

.slider__img {
  width: 100%;
  filter: blur(0) brightness(40%);
  /* opacity: 0;
  animation: hideImage .5s; */
  /*    animation: hideImage .5s, scaleBackImage .5s forwards; */
}

.slider__title,
.slider__text {
  font: 4em Arial, sans-serif;
  color: rgb(250, 245, 245);
  margin: 15px 0;
}

.header-slider__content {
  position: absolute;
  height: auto;
  display: flex;
  /* align-items: center; */
  flex-flow: column nowrap;
  /* justify-content: center; */
}

.slider__text {
  margin: 0 auto;
  font: 2em Arial, sans-serif;
  text-align: center;
  animation: hideImage .7s, scaleBackImage .5s forwards;
}

.slider__title {
  margin-bottom: 20px;
  animation: hideImage .5s, scaleBackImage .4s forwards;
}

.slick-active .slider__title {
  animation: bounceInRight 1.5s both 1.5s;
}

.slick-active .slider__text {
  animation: bounceInUp 1.5s both .5s;
}

@media (max-width:767px) {
  .header_slider {
    margin-top: 50px;
  }

  .slider__title {
    font: 1.5em Arial, sans-serif;
  }

  .slider__text {
    font: 1.1em Arial, sans-serif;
  }
}

/* .slick-active .slider__img {
  animation: showImage .8s .5s forwards, scaleImage .5s .5s forwards;
} */

@keyframes showImage {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes hideImage {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes scaleImage {
  0% {
    transform: scale(0);
    transform-origin: center;
  }

  100% {
    transform: scale(1);
    transform-origin: center;
  }
}

@keyframes scaleBackImage {
  0% {
    transform: scale(1);
    transform-origin: center;
  }

  100% {
    transform: scale(0);
    transform-origin: center;
  }
}