JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#overlay" id="open-overlay_1">Open Overlay 1</a><br>
<a href="#overlay" id="open-overlay_2">Open Overlay 2</a>

<div id="overlay">
    <a href="#" class="close">&times;</a>
 
    <!-- I want to change this content with php based on the different overlaybuttons -->
    <h2 style="font-size:35px">Pure CSS Overlay</h2>
    <p style="font-size:22px;">OPEN CONTENT OVERLAY 1</p>
    
</div>


<div id="mask" onclick="document.location='#';"></div> <!-- the only javascript -->

CSS

#overlay{ /* we set all of the properties for are overlay */
    height:80%;
    width:80%;
    margin:0 auto;
    background:white;
    color:black;
    padding:10px;
    position:absolute;
    top:5%;
    left:10%;
    z-index:1000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#mask{ /* create are mask */
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
    display:block;
    opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
    display:block;
    position:absolute;
    top:-20px;
    right:-20px;
    background:red;
    color:white;
    height:40px;
    width:40px;
    line-height:40px;
    font-size:35px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    -o-border-radius:40px;
    border-radius:40px;
}
#open-overlay_1, #open-overlay_2{ /* open the overlay */
    padding:10px 5px;
    background:blue;
    color:white;
    text-decoration:none;
    display:inline-block;
    margin:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

JavaScript

var text_1 = 'Integer quis tortor ac erat ornare molestie. Vivamus tincidunt erat eros, vitae accumsan sem vehicula congue. Ut eu sem id urna cursus euismod non a justo. Vestibulum in dui sed arcu varius mollis. Donec eget nulla sed augue mattis congue. Mauris venenatis augue sit amet eleifend ultrices.';

var text_2 = 'Etiam quis hendrerit leo. Quisque feugiat euismod purus vel elementum. Vestibulum nec vulputate nunc. Vivamus vitae sollicitudin nisl, ut eleifend diam. Mauris quis ligula arcu.';

$(document).ready(function(){
  $('#overlay p').html('')
  
  $('#open-overlay_1').click(function(){
     $('#overlay p').html(text_1)
  })
  
  $('#open-overlay_2').click(function(){
      $('#overlay p').html(text_2)
  })
})