JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="container">
    <button>New Notification</button>  
    <div class="notifications-container"></div>
  </div>
</body>

CSS

* {
    box-sizing: border-box;
  }
  .container {
    height: 300px;
    width: 400px;
    border: 1px solid black;
    position: absolute;
  }
  .notifications-container {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 200px;
    background: rgba( 0, 0, 0, 0.2 );
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    overflow: hidden;
  }
  .notif {
    position: relative;
    width: 100%;
    padding: 10px;
    border: 1px solid black;
    animation: notifAnim 5s forwards;
    transition: all .2s;
    background: white;
  }
  button {
    z-index: 100;
    background: lightcoral;
    color: white;
    border: none;
    padding: 10px;
    font-size: 20px;
    margin: 5px;
  }

  @keyframes notifAnim {
    0% { transform: translateY( 100% ) }
    20% { transform: translateY( 0 ) }
    80% { transform: translateY( 0 ) }
    100% { transform: translateY( 100%) }
  }

JavaScript

let btn = document.querySelector('button')
  let container = document.querySelector('.notifications-container')

  let notif_contents = [
    "<p>1</p><p>1</p><p>1</p><p>1</p>",
    "<p>test</p>",
    "<div><h1>testtesttest</h1><p>yoloalsdfasdf</p></div>"
  ]
  let current = 0
  
  btn.onclick = () => {

    let notif = document.createElement('div')
    notif.classList.add('notif')
    notif.innerHTML = notif_contents[current]
    notif.addEventListener('animationend', () => {
      notif.parentElement.removeChild(notif)
    })
    current++

    container.append(notif)
  }