JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:void(0)" onclick="termsShow()">Terms of Service</a>
<div id="terms" class="content">
    Content 1
    <a href="javascript:void(0)" onclick="termsClose()">Close</a>
</div>
<div id="fade" class="overlay"></div>

<a href="javascript:void(0)" onclick="privacyShow()">Privacy policy</a>
<div id="private" class="content">
    Content 2
    <a href="javascript:void(0)" onclick="privacyClose()">Close</a>
</div>
<div id="fade" class="overlay"></div>

CSS

.overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index:1001;
    -moz-opacity: 0.5;
    opacity:.50;
    filter: alpha(opacity=50);
}
.content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid #ccc;
    background-color: white;
    z-index:1002;
    overflow: auto;
    border-radius: 15px;
}

JavaScript

function termsShow() {
    document.getElementById('terms').style.display = 'block';
    document.getElementById('fade').style.display = 'block';
}

function termsClose() {
    document.getElementById('terms').style.display = 'none';
    document.getElementById('fade').style.display = 'none';
}

function privacyShow() {
    document.getElementById('private').style.display = 'block';
    document.getElementById('fade').style.display = 'block';
}

function privacyClose() {
    document.getElementById('private').style.display = 'none';
    document.getElementById('fade').style.display = 'none';
}