JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slidshow">
  <img class="slidshow-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img1.jpg" alt="スライドショー画像1">
  <img class="slidshow-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img2.jpg" alt="スライドショー画像2">
  <img class="slidshow-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img3.jpg" alt="スライドショー画像3">
  <img class="slidshow-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img4.jpg" alt="スライドショー画像4">
</div>

SCSS

.slidshow {
  position: relative;
  width: 280px;
  height: 200px;
  overflow: hidden;
}

.slidshow {
  .slidshow-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    opacity: 0;
    animation: slidshow 12s linear infinite;

    &:nth-child(2) {
      animation-delay: 3s;
    }

    &:nth-child(3) {
      animation-delay: 6s;
    }

    &:nth-child(4) {
      animation-delay: 9s;
    }
  }
}
@keyframes slidshow {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  25% {
    opacity: 1
  }

  38% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}