JSFiddle - React, Tailwind, and code Playground

HTML

<button id="openPopup">Press me to show popup</button>


<div id="PopupMessage">
                this will be popup message
            </div>

CSS

#PopupMessage{
    width:95%;
    height:30px;
    background: #999;
    color: #ececec;
    position:fixed;
    bottom:0px; 
    margin:2%;
    padding:1%;
    border-radius:10px;
    -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 5px 5px rgba(0,0,0,.9);
    box-shadow: 0px 5px 5px rgba(0,0,0,.9);
    display:none;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: linear;
    opacity: 0;
}

#PopupMessage:hover{
    opacity:1;
}

JavaScript

$('#openPopup').toggle(
         function() {
             $('#PopupMessage').slideDown();
         } ,
         function() {
             $('#PopupMessage').slideUp();
         });