JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div class="box">
    <div class="profile1">
        <div class="picture"></div>
        <p class="name">NAME</p>
    </div>
</div>
<!--popup box-->
<div id="popupbox">This is the popup box</div>
<!--end popup box-->

CSS

.box {
    left: 19.5%;
    top: 11.5%;
    height:85%;
    right:2.2%;
    background-color: #F2F2F2;
    border-radius: 5px;
    position: absolute;
    border: 1px soid F2F2F2(0, 0, 0, 0.3);
    z-index:-1;
    overflow: auto;
}
.profile1 {
    margin-left:1.7%;
    margin-top:6%;
    height:40%;
    width:18%;
    background-color:#0D7BFF;
    position:absolute;
    z-index:-1;
    border-radius:2px;
}
#popupbox {
    position:fixed;
    width:50vw;
    height:50vh;
    background-color:#eee;
    display:none;
}

JavaScript

window.addEventListener('load', function () {
    var profileBox = document.getElementsByClassName('profile1')[0];
    var picture = document.getElementsByClassName('picture')[0];
    profileBox.addEventListener('click', function () {
        document.getElementById('popupbox').style.display = 'block';
        picture.innerHTML = '<img src="http://freetopwallpaper.com/wp-content/uploads/2013/09/beautiful-background-wallpaper-hd-3.jpg">';
    });
});