JSFiddle - React, Tailwind, and code Playground

CSS

.notif {
  padding: 20px;
  width: 200px;
  background: red;
  color: white;
  position: fixed;
  top: -200px;
  animation: notif-visible 1s forwards, notif-visible 1s 3s forwards reverse;
}

@keyframes notif-visible {
  from {
    top: -200px;
  }
  to {
    top: 55px;
  }
}

JavaScript

var notif = document.createElement('div')
notif.className = 'notif'
notif.innerText = 'a;ldska;sld ka;sldka ;sdkl a;slkd;askd ;askd'
document.body.appendChild(notif)

setTimeout(() => notif.remove(), 6000)