JSFiddle - React, Tailwind, and code Playground

by Vlad Merjevich

HTML

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

CSS

.warn {
	background: #fc0;
	padding: 10px;
	top: 0;
	position: absolute;
	left: 0; right: 0;
  }
.fadeInTop {
          -webkit-animation-name: fadeInTop;
		  -webkit-animation-duration: 1s;
		   -webkit-animation-delay: 1s;
		 animation-name: fadeInTop;
		 animation-duration: 1s;
		 animation-delay: 1s;
}
@-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;
  }
}