JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <a href="#" class="abrir"><input type="button" class="boton-abrir" value="Ventana modal" /></a>
</div>

<div class="modal">
	<div class="ventana">
		<h1>Esto es una ventana modal</h1>
		<input type="button" class="boton-cerrar" value="Cerrar" />
	</div>
</div>

CSS

*{
margin:0;
padding:0;
}

.modal{
	width:100%; 
	height:100%; 
	background: rgba(0,0,0,.3);
	position:fixed;
	top:0;
	left:0;
	display:none;
}

.ventana{
	width:300px;
	height:300px;
	background: #fff;
	text-align:center;
	position:absolute;
	top:20%;
	left:-150px;
	margin-left:50%;
	}
	
.boton-abrir, .boton-cerrar{
	margin:15px;
	padding:15px;
	font-size:1.5em;
}

JavaScript

$(document).ready(function(){
	
		$(".boton-abrir").click(function(){
		
			$(".modal").fadeIn("300");
		
		});
		
		$(".boton-cerrar").click(function(){
		
			$(".modal").fadeOut("300");
		
		});
	
	});