JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Modal Popups | Victoria Pod</title>
    </head>
    <body>
        <header>
            <p>
                <a href="http://victoriapod.com/create-simple-css3-modal-popup/">Go to the tutorial →</a>
            </p>
        </header>

        <!-- button -->
        <div class="button">
            <p><a href="#bubble" id="pop">Click Me!!</a></p>
        </div>

        <!-- popup -->
        <a href="#x" class="overlay" id="bubble"></a>
        <div class="popup">
            <h2>This a popup!</h2>
                <p>This is a lovely pop up custom built using CSS3 and no JavaScript</p>
                <!-- close -->
                <a class="close" href="#close"></a>
        </div>
    </body>
</html>

CSS

/**
 * Simple CSS3 Modal Popups | Victoria Pod
 */

header p {padding-top:50px;text-align:center;}
.button a#pop {
    text-align:center;
    position:absolute;
    top:30%;
    left:45%;

    background-color:#444;
    border: 2px solid #ddd;
    color: #fff;
    display: block;
    float: right;
    margin-right: 10px;
    padding: 10px 30px;
    font-size:20px;
    text-decoration: none;
    text-shadow: 1px 1px #000;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
a#pop:hover {
    border-color: #eee;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 10;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: #fff;
    height: 30px;
...