JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.5.1/animate.min.css">
<button id="trigger">Make New Alerts</button>
<div id="terminal"></div>

SCSS

body{background:black; color:white;}

p {
    color: #fff;
    font-family: sans-serif;
    letter-spacing: 1px;
}

#terminal span {
font-family: monospace;
display: block;
    font-size: 2em;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
}

#terminal span:first-child:after {
    content: " ";
}

#terminal span:after {
  content: "_";
  opacity: 0;
  animation: cursor 1s infinite;
}

#terminal {
    box-sizing: border-box;
    display: table-cell;
    vertical-align: middle;
    position: fixed;
    bottom: 0;
    color: #62FF17;
    font-size: 0.5em;
    padding: 1em;
    text-shadow: 0 0 12px rgba(84, 255, 3, 0.86);
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown !important;
    animation-name: fadeOutDown !important;
}

JavaScript

var queue = [];
var busy = false;

// Enqueue
function addAlert(m) {
  queue.push(m);
  if (!busy) {
    busy = true;
    fireAlerts(queue);
  }
}

// Show
function fireAlerts(alerts) {
  var $e = null;
  var len = alerts.length;
  $.each(alerts, function(index, value) {
  console.log(alerts);
  	// Use IIFE to multiply Wait x Index (http://stackoverflow.com/a/5226335/922522)
    (function(index, value) {
      var wait = index * 1000 + 1000;
      setTimeout(function() {
      	// Show Alert
        $e = $("<span>").text(value);
        $("#terminal").append($e);
        setTimeout(removeAlert, 2000, $e);        
        // Remove displayed from queue
        queue.shift();
        // End of alerts array
        if (index === len - 1) {
          busy = false;
          // Are there more in the queue?
          if (queue.length > 0) {
            fireAlerts(queue);
          }
        }
      }, wait);
    })(index, value);
  });
}

// Hide
function removeAlert($e) {
  $e.addClass('fadeOutDown');
}

// Trigger
$("#trigger").click(function(event) {
  addAlert('a');
  addAlert('b');
  addAlert('c');
  addAlert('d');
});