JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<button class="open-callback">кнопка</button>
<div class="modal fade" id="modal-callback" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close icon" data-dismiss="modal">X</button>
            <form>контент</form>
        </div>
    </div>
</div>

CSS

.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: none;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline:0;
}
.modal.fade .modal-dialog {
	-webkit-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out;
	-webkit-transform: translate3d(0,-25%,0);
	-o-transform: translate3d(0,-25%,0);
	transform: translate3d(0,-25%,0);
}
.modal.in .modal-dialog {
	-webkit-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
.modal-open .modal {
	overflow-x: hidden;
	overflow-y: scroll;
}
.modal-dialog {
	position: relative;
}
.modal-content {
	position: relative;
}
.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000;
}
.modal-backdrop.fade {
	filter: alpha(opacity=0);
	opacity:0;
}
.modal-backdrop.in {
	filter: alpha(opacity=90);
	opacity: .9;
}
.modal-content .close {
	margin-top: -2px;
	padding: 0;
}
.modal-scrollbar-measure {
	position: absolute;
	top: -9999px;
	width: 50px;
	height: 50px;
	overflow: scroll;
}
#modal-callback .modal-dialog, #modal-result .modal-dialog {
	border: 5px solid #9a4f43;
	padding: 40px;
  background-color: #ffffff;
	text-align: center;
	width: 200px;
	margin: 20px auto;
}
.modal-content .close {
	position: absolute;
	right: 0;
	top: 0;
}

JavaScript

+function(t){"use strict";function e(e,s){return this.each(function(){var i=t(this),n=i.data("bs.modal"),a=t.extend({},o.DEFAULTS,i.data(),"object"==typeof e&&e);n||i.data("bs.modal",n=new o(this,a)),"string"==typeof e?n[e](s):a.show&&n.show(s)})}var o=function(e,o){this.options=o,this.$body=t(document.body),this.$element=t(e),this.$backdrop=this.isShown=null,this.scrollbarWidth=0,this.options.remote&&this.$element.find(".modal-content").load(this.options.remote,t.proxy(function(){this.$element.trigger("loaded.bs.modal")},this))};o.VERSION="3.2.0",o.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},o.prototype.toggle=function(t){return this.isShown?this.hide():this.show(t)},o.prototype.show=function(e){var o=this,s=t.Event("show.bs.modal",{relatedTarget:e});this.$element.trigger(s),this.isShown||s.isDefaultPrevented()||(this.isShown=!0,this.checkScrollbar(),this.$body.addClass("modal-open"),this.setScrollbar(),this.escape(),this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',t.proxy(this.hide,this)),this.backdrop(function(){var s=t.support.transition&&o.$element.hasClass("fade");o.$element.parent().length||o.$element.appendTo(o.$body),o.$element.show().scrollTop(0),s&&o.$element[0].offsetWidth,o.$element.addClass("in").attr("aria-hidden",!1),o.enforceFocus();var...