JSFiddle - React, Tailwind, and code Playground

HTML

<span id="companiesOpen">click companies</span>
         
         <!--companies modal-->
            <div id="companiesModal" class="modal">

              <!--modal-->
              <div class="modal-content">
                <span class="close">&times;</span>
                <p>test 1</p>
              </div>

            </div>
            
            <span id="privacyOpen">click privacy</span>
            
            <!--privacy modal-->
            <div id="privacyModal" class="modal">

              <!--modal-->
              <div class="modal-content">
                <span class="close">&times;</span>
                <p>test</p>
              </div>

            </div>

CSS

/*modal background*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/*modal box*/
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 5px solid #f9cdcd;
    width: 80%; /* Could be more or less, depending on screen size */
}

.modal-content p{
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
}

/*close button*/
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

JavaScript

// Get modalCompanies
var modalCompanies = document.getElementById('companiesModal');

// Get button that opens the modalCompanies
var btnCompanies = document.getElementById("companiesOpen");

// Get <spanCompanies> element that closes the modalCompanies
var spanCompanies = document.getElementsByClassName("close")[0];

// When user clicks on the button, open the modalCompanies 
btnCompanies.onclick = function() {
    modalCompanies.style.display = "block";
}

// When user clicks on <spanCompanies> (x), close modalCompanies
spanCompanies.onclick = function() {
    modalCompanies.style.display = "none";
}

// When user clicks anywhere outside of the modalCompanies, close it
window.onclick = function(event) {
    if (event.target == modalCompanies) {
        modalCompanies.style.display = "none";
    }
}




 // Get modalPrivacy
var modalPrivacy = document.getElementById('privacyModal');

// Get button that opens the modalPrivacy
var btnPrivacy = document.getElementById("privacyOpen");

// Get <spanPrivacy> element that closes the modalPrivacy
var spanPrivacy = document.getElementsByClassName("close")[1];

// When user clicks on the button, open the modalPrivacy 
btnPrivacy.onclick = function() {
    modalPrivacy.style.display = "block";
}

// When user clicks on <spanPrivacy> (x), close modalPrivacy
spanPrivacy.onclick = function() {
    modalPrivacy.style.display = "none";
}

// When user clicks anywhere outside of the modalPrivacy, close it
window.onclick = function(event) {
    if (event.target == modalPrivacy) {
        modalPrivacy.style.display = "none";
    }
}