JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="modal">
    <div class="modal-window">
        <div>Hello World!
        <br/>
            <label for="modal">Close model</label></div>
    </div>
    
    <label for="modal">
        Show modal...
    </label>

CSS

input{
    display: none;
}
.modal-window{
    display:none;
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    overflow:hidden;
    background: rgba(255,255,255, .7);
}
.modal-window div {
    width: 200px;
    height: 200px;
    margin: 10% auto;
    text-align: center;
}
label{
    width: 200px;
    margin:auto;
   }
input:checked~div{
    display: block;
}