JSFiddle - React, Tailwind, and code Playground

by Premchand R

HTML

<button onclick="flashBox();">
  Append Message
</button>

CSS

.flash-msg-box{
  position:fixed;
  text-align:center;
  top:0;
  left:0;
  z-index:999;
  width:100%;
  background-color:#BFE3C2;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;
  -webkit-animation: animatetop .4s;
  animation: animatetop .4s;
  display:none;
}

JavaScript

function flashBox(){
	$('.flash-msg-box').remove();
  $('body').append('<div class="flash-msg-box"><p><i class="icon-ok-circled2-1" style="color: #34BC31;"></i> <b>Wal Mart Stores Inc</b> has been added to your Deck</p></div>')
  setTimeout(function(){
  	$('.flash-msg-box').remove();  
  },4000);
}
$(document).ready(function(){
	flashBox();
});