JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pic1">Блок плавно появляется и исчезает</div>

CSS

@keyframes pic1 {
    50% {opacity: 1; height: 150px;} 
    0%, 100% {opacity: 0; height: 0;}
   }

.pic1 {
    animation-duration: 5s;
    animation-delay: 1s;
     animation-name: pic1;
    animation-iteration-count: infinite;
    opacity: 0;
    overflow: hidden;
    font-size: 50px;
    height: 0;
}