JSFiddle - React, Tailwind, and code Playground

by vinishanto

HTML

<body>

<div class="modal-container">

<div id="pmsg" class="modal fade custom_modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content text-center">
                <div class="modal_header">
                <p> Please wait while we process your credit application... </p>
                <img class="processing-elem-img" src="../dest/static/img/ic_processing.gif" />
                <p>This can take up to 2 minutes.</p>
                <p>Do not leave or refresh this page.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<button onclick="document.querySelector('#pmsg').classList.add('in')" >
click me </button>

</body>

CSS

*{-webkit-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857;color:#333; }img{vertical-align:middle}p{margin:0 0 10px}.text-center{text-align:center} .fade.in{opacity:1; display: block;}.modal{display: none; overflow:hidden;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);background-clip:padding-box;outline:0; padding:20px; margin: 20px;}@-ms-viewport{width:device-width}

.modal-container{
	height: 100vh;
	display:flex;
	justify-content: center;
}