JSFiddle - React, Tailwind, and code Playground

HTML

<div class="warn fadeInTop">Вы не учли, что скалярное 
  поле необходимо и достаточно!</div>

CSS

.warn {
	background: #fc0;
	padding: 10px;
	top: -100px;
	position: absolute;
	left: 0; right: 0;
  }
.fadeInTop {
          -webkit-animation-name: fadeInTop;
		  -webkit-animation-duration: 1s;
		   -webkit-animation-delay: 2s;
           -webkit-animation-fill-mode: forwards;
		 animation-name: fadeInTop;
		 animation-duration: 2s;
		 animation-delay: 1s;
         animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInTop {
  from {
    opacity: 0;
    top: -100px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}
@-webkit-keyframes fadeInTop {
  from {
    opacity: 0;
    top: -100px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}
@keyframes fadeInTop {
  from {
    opacity: 0;
    top: -100px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}
@keyframes fadeInTop {
  from {
    opacity: 0;
    top: -100px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}