JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<div class="notifications">
  <div class="item item--v1">Lorem ipsum</div>
  <div class="item item--v2">v2</div>
</div>

SCSS

body {
  padding: 0;
}

.notifications {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}


.item {
  box-sizing: border-box;
  padding: 20px 30px;
  transition: transform .4s ease-in-out, opacity .4s ease-in-out;
  opacity: 0;
  transform: translate3d(0, 100%, 0);

  &.is-active {
    transform: translate3d(0, 0, 0) translateX(-20px);
    opacity: 1;
  }

  &:not(:last-child) {
    margin-bottom: 15px;
  }
}

.item--v1 {
  border: 1px solid red
}

.item--v2 {
  border: 1px solid blue
}

JavaScript

const item1 = document.getElementsByClassName('item--v1')[0];
const item2 = document.getElementsByClassName('item--v2')[0];

setTimeout(() => {
  item2.classList.add('is-active');
}, 1000);


setTimeout(() => {
  item1.classList.add('is-active');
}, 3000);