JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.easing.1.3.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js"></script>
<input type="button" value="Details" id="btndetails" />
<div id="element_to_pop_up">
    <span class="button b-close"><span>X</span></span>
</div>

CSS

#element_to_pop_up
{ 
   background-color:#fff;
   border-radius:15px;
   color:#000;
   display:none; 
   padding:20px;
   min-width:400px;
   min-height: 180px;
}
span.button.b-close {
position: absolute;
top: 5px;
right: 8px;
    cursor:pointer;
}

JavaScript

(function($) 
{
           /*Popup for Details Button*/
        $('#btndetails').bind('click', function(e)
        {
            // Prevents the default action to be triggered. 
                e.preventDefault();
       
                $('#element_to_pop_up').bPopup();
            var html = $("#element_to_pop_up").html();
             $("#element_to_pop_up").html(html+ "Some text");
        });
 
})(jQuery);