JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="popup" class="popUpControl">
<label for="popup">
   Pop-up 1
   <span class="box">
       Super cool popup content
   </span>
</label>
<input type="checkbox" id="popup-2" class="popUpControl">
<label for="popup-2">
   Pop-up 2
   <span class="box">
       Content 2
   </span>
</label>

CSS

.box {
    position: absolute; top: 30px; left: 0; z-index: 100;

/* Prevent some white flashing in Safari 5.1 */
    -webkit-backface-visibility: hidden;
    
    border-radius: 20px;
    
    width: 260px;
    padding: 20px;
    opacity: 0;

        -webkit-transform: scale(0) skew(50deg);
        -webkit-transform-origin: 0px -30px;
        -webkit-transition: -webkit-transform ease-out .1s, opacity ease-out .1s;
}
.popUpControl { display: none; }
.popUpControl:checked + label > .box {
        opacity: 1;
        -webkit-transform: scale(1) skew(0deg);
}