JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#home">модальное окно</a>
<div id="home" class="win">
    <div>
        <a href="" title="Закрыть" class="close">x</a>
        <h2>name</h2>
        <p>text</p>
    </div>
</div>

SCSS

.win {
    position:fixed;z-index:3;
    font-family: Arial, Helvetica, sans-serif;
    top:0;right:0;bottom:0;left:0;
    background:rgba(0,0,0,0.8);
    display:none;
    pointer-events:none;
    
    &:target {
        display:block;
        pointer-events:auto;
    }
        
    div {
		width:400px;
		position:relative;
		margin:10% auto;
		padding:10px 20px;;
		border-radius:10px;
		background:#fff;  
	}
        
    .close {
		background:#aaa;
		color:#fff;
		line-height:25px;
		position:absolute;
		right:-12px;
		text-align:center;
		top:-10px;
		width:24px;
		 
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		 
        &:hover { 
            background: #10ff34; 
        }
    }
}