JSFiddle - React, Tailwind, and code Playground

HTML

<div id="notify-container" class="">
      <div id="notify-111028" style="">
        <span class="notify-close">
          <a title="dismiss this notification">×</a>
        </span>
        <span class="notify-text">

        </span>
      </div>
    </div>
<div id="container"></div>

CSS

#container {
    height:200px;
    width:100%;
    background-color:#333;
    border:1px solid gray;
}
#notify-container {
  font-size: 120%;
  font-weight: bold;
  text-align: center;
  width: 100%;
  height: 1px;
  position: relative;
  z-index: 100;
  color: #555555;
  text-shadow: 0 0.5px 0 #333;
  margin-bottom: 31px;
  display: none;
}
#notify-container div {
  background-color: #e1e1e1;
  border-bottom: 1px solid #ffffff;
  padding: 7px 0;
}
#notify-container a {
  text-decoration: underline;
  color: #555555;
}
#notify-container span.notify-close {
  background-color: #aeaeae;
  float: right;
  margin-right: 20px;
  border: 2px solid #555555;
  padding: 0 4px 0px 4px;
  text-decoration: none;
  display: block;
  cursor: pointer;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
#notify-container span.notify-close a {
  text-decoration: none;
}

JavaScript

var notifyBox = $('#notify-container');
var notifyText = notifyBox.find('.notify-text');

notifyBox.updateText = function(txt) {
    notifyText.text(txt);
    notifyBox.slideDown();
};

var initialText = 'A notification test';
if (true) {
    notifyBox.updateText(initialText);
}