JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<div class="notification">
  <p>This is a notification box.</p>
</div>

CSS

.notification {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  animation: slideIn 0.5s forwards, fadeOut 3.5s 5.5s forwards;
  opacity: 0;
}

@keyframes slideIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}