JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#openModal">Open Modal</a>
        <div id="openModal" class="modalDialog">

  <div><div class="pop-header">
  <span>Title</span>
                            <a href="#close" title="Close" class="close">X</a>
                            
                            
                        </div>
                        
  </div>
    </div>

CSS

.pop-header
    {
         width: 100%;
         background-color: red;
         height: 30px;
         border-radius: 5px;
         line-height:30px;
        
    }
    
    .pop-header > span{
      color:#fff;
    }

    .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }


    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 600px;
        position: relative;
        margin: 2% auto;
        padding: 0;
        border-radius: 5px;
        background: #fff;
        height: 100%;
    }

    .close
    {
        float: right;
        padding-right: 5px;
    }