JSFiddle - React, Tailwind, and code Playground

HTML

<body>

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

</body>

CSS

#notificationBarBottom {
    position: fixed;
    z-index: 101;
    bottom: 0;
    left: 0;
    right: 0;
    background: #5cb85c;
    color: #ffffff;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(0px); }
    10%, 90% { -webkit-transform: translateY(510px); }
}

@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(0px); }
    10%, 90% { -moz-transform: translateY(510px); }
}

.cssanimations.csstransforms #notificationBarBottom {
    -webkit-transform: translateY(510px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(510px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

.cssanimations.csstransforms #close {
  display: none;
}