JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mot mot1">Mot1</div>
<div class="mot mot2">Mot2</div>
<div class="mot mot3">Mot3</div>
<div class="mot mot4">Mot4</div>

CSS

.mot {
  position:absolute;
  top:0;
  left:0;
  text-align:center;
  width:100%;
  opacity:0;
  animation-name: show;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

.mot1 { animation-delay: 0s; }
.mot2 { animation-delay: 2s; }
.mot3 { animation-delay: 4s; }
.mot4 { animation-delay: 6s; }

@keyframes show {
    0%   {opacity:0;}
    5%  {opacity:1;}
    20%  {opacity:1;}
    25%  {opacity:0;}
    100% {opacity:0;}
}