JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css">

<div><button type="button" class="btn btn-primary">Primary</button></div>
<hr>
<div><button type="button" class="btn btn-primary">Primary</button></div>
<hr>
<div><button type="button" class="btn btn-primary">Primary</button></div>
<hr>
<div><button type="button" class="btn btn-primary">Primary</button></div>
<hr>
<div><button type="button" class="btn btn-primary">Primary</button></div>
<hr>
<div><button type="button" class="btn btn-primary">Primary</button></div>
<hr>
<div><button type="button" class="btn btn-primary">Primary</button></div>
<hr>
<div><button type="button" class="btn btn-primary">Primary</button></div>

<div class="modal fade" id="textModal" data-backdrop="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" style="text-align:center">Great Work!</h4>
            </div>
            <div class="modal-body">Everything was matched :)</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn">Next</button>
            </div>
        </div>
    </div>
</div>

CSS

.modal {
bottom: initial;
overflow-y: hidden;
}
.modal-dialog {
margin: 0px;
}

JavaScript

$(function(){
 $(".modal").modal("show").draggable({handle: ".modal-header"});
 $(".btn-primary").on("click", function(){
 	alert("btn click")
 })
})