JSFiddle - React, Tailwind, and code Playground

by James Butler

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);
    transition: all 0.8s;
    display:none;
}

#PopupMessage:hover{
    opacity:0;
}

JavaScript

$('#openPopup').click(function () {
            $('#PopupMessage').slideToggle();
        });