JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <div class="content">
    <p>Содержимоe</p>
  </div>
</div>

SCSS

@keyframes showBlock{
  0%{
    display: none;
    visibility: hidden;
    opacity: 0;
  }
  1%{
    display: block;
    height: 2px;
  }
  100%{
    visibility: visible;
    opacity: 1;
    height: 500px;
  }
}
@keyframes showContent{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.block{
  width: 100%;
  background-color: lightgreen;
  animation: showBlock 2s 1s ease-in-out both;
  line-height: 500px;
  text-align: center;
}
.content{
  animation: showContent .8s 3s ease-in-out both; // 3s задержка перед проигрыванием анимации т.к. анимация родительского блока идет 2 сеунды и delay у нее тоже 1 секунда https://webref.ru/css/animation-delay
}