JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <button id="openModal" type="button" class="sign-in">Открыть модальное окно</button>
  
  <!-- The Modal -->
<div id="loginModal" class="modal">
	<div class="modal-content">
		<span class="close">x</span>
		<p>Some text in the Modal..</p>
	</div>
</div>
</body>

CSS

body{
  background: url(http://i.imgur.com/rvXv5.jpg) no-repeat;
}
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-filter: blur(5px);
	filter: blur(5px);
}
/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

JavaScript

var modal = document.getElementById('loginModal');
var btn = document.getElementById("openModal");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block";
};
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}