JSFiddle - React, Tailwind, and code Playground

by Cam Gould

HTML

<body>

<div id="notificationBarBottom">Hello, human!</div>

</body>

CSS

#notificationBarBottom {
    position: fixed;
    z-index: 101;
    bottom: -510px;
    left: 0;
    right: 0;
    background: #5cb85c;
    color: #ffffff
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    box-shadow:         0 0 5px black;
}
@keyframes slideDown {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-510px); }
}
#notificationBarBottom {
    animation: slideDown 2.5s ease forwards;
}
#close {
  display: none;
}