JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <p>This page shows a notification bar which uses CSS3 Animations and some basic JavaScript. The bar will fade in quickly, stay visible for a couple of seconds, and slowly fade out. Try to fire some events to see it in action.</p>
    
  <button>Add something</button>
  <button>Save changes</button>
  <button>Delete</button>
</div>

CSS

@-webkit-keyframes so_tooltip {
  0% { 
    display: block;
    opacity: 0; 
  }
  5%, 80% { 
    display: block;
    opacity: 1; 
  }
  100% { 
    display: none;
    opacity: 0; 
  }
}

.wrapper {
  color: #444;
  font-size: small;
  font-family: sans-serif;
  position: relative;
}

.wrapper > p {
  padding: 1em 0;
}

.tooltip { 
  font-size: 110%;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  line-height: 2.5;
  text-align: center;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  -webkit-animation: so_tooltip 5s 1 linear forwards; 
}

JavaScript

/**
 * Basic example using CSS3 animation to mimic Stack Overflows
 * tooltip, by madr <[email protected]>
 *
 * version 1.0, 2011-08-05
 */

(function(window, document){
    var tooltip, buttons;
    
    // First run will append the tooltip element to the DOM.
    // if the tooltip is present, it will be replaced by a new tooltip
    // since current implementations of css3 animations cannot be
    // "replayed". 
    function showTooltip(message, old_tooltip) {
        if (typeof old_tooltip == 'undefined') {
            old_tooltip = (function (elm, ref) {
                ref.parentNode.insertBefore(elm, ref);
                return elm;
            })( document.createElement('div'), buttons[0] ); // should be document.body or similar
        }
        
        tooltip = old_tooltip.cloneNode( true );
      
        tooltip.className = 'tooltip';
        tooltip.innerHTML = message;
      
        old_tooltip.parentNode.replaceChild(tooltip, old_tooltip);
    }
    
    buttons = document.getElementsByTagName('button');
    
    // add
    buttons[0].addEventListener('click', function(evt){
        var message = 'Something was added.';
        showTooltip(message, tooltip);
    });
    
    // save
    buttons[1].addEventListener('click', function(evt){
        var message = 'Saved and up to date.';
        showTooltip(message, tooltip);
    });
    
    // delete
    buttons[2].addEventListener('click', function(evt){
        var message = 'deleted from db.';
        showTooltip(message, tooltip);
    });
})(this, document);