JSFiddle - React, Tailwind, and code Playground

bPop-Up http://dinbror.dk/blog/bPopup/

by Jennifer Perrin

HTML

<script src="http://dinbror.dk/downloads/jquery.bpopup-0.6.0.js"></script>
<span class="button small popup" data-bpopup='{"fadeSpeed":"slow", "followSpeed":1500, "modalColor":"greenYellow"}'>Pop it up</span>

<div id="popup" style="left: 701.5px; position: absolute; top: 565px; z-index: 9999;">
<span class="button bClose">
<span>X</span>
</span>
If you can't get it up use
<br>
<span class="logo">bPopup</span>
</div>

CSS

.button{background-color:#2b91af;border-radius:10px;box-shadow:0 2px 3px rgba(0,0,0,0.3);color:#fff;cursor:pointer;display:inline-block;padding:10px 20px;text-align:center;text-decoration:none}
.button.small{border-radius:15px;margin:22px 5px 0;padding:6px 15px}
.button:hover{background-color:#1e1e1e}
.button>span{font-size:84%}
.button.bClose{border-radius:7px 7px 7px 7px;box-shadow:none;font:bold 131% sans-serif;padding:0 6px 2px;position:absolute;right:-7px;top:-7px}

#popup {
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 25px 5px #999999;
    color: #111111;
    display: none;
    min-width: 450px;
    padding: 25px;
}
#popup {
    min-height: 250px;
}
#popup .logo {
    color: #2B91AF;
    font: bold 325% 'Petrona',sans;
}

JavaScript

;
(function($) {

    // DOM Ready
    $(function() {

        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $(".popup").bind("click", function(e) {

            // Prevents the default action to be triggered.
            e.preventDefault();

            // Triggering bPopup when click event is fired
            $('#popup').bPopup({
                fadeSpeed: 'slow',
                //can be a string ('slow'/'fast') or int
                followSpeed: 1500,
                //can be a string ('slow'/'fast') or int
                modalColor: 'Yellow'
            });

        });

    });

})(jQuery);