JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="serviceList">
    <li class="openModal">
         <h2>Builders waste disposal</h2>

        <div class="modal modalScale">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </li>
    <li class="openModal">
         <h2>Builders waste disposal</h2>

        <div class="modal modalScale">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </li>
    <li class="openModal">
         <h2>Builders waste disposal</h2>

        <div class="modal modalScale">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </li>
</ul>

SCSS

ul {
    li {
        float: left;
        width: 33.3%;
        position: relative;
        /* contain .modalScale object */
        
    }
}

.modal {
    position: absolute;
    width: 400px;
    height: 400px;
}
.modal {
    display: none;
    line-height: 100px;
    background: #ccc;
    border: 1px solid #444;
    text-align: center;
    transform: scale(0);
    opacity: 0;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out;
    &.active {
        display: block;
        transform: scale(1);
        opacity: 1;
        &.modalScale {
            animation: anim .3s ease-in-out;
        }
    }
}
@keyframes anim {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

JavaScript

$('.openModal').on('click', function (e) {
    $('#serviceList').find('.modal.active').removeClass('active');
    e.preventDefault();
    $(this).find('.modal').toggleClass('active');
});

$(document).on('click', function (e) {
    var $target = $(e.target);
    if($target.closest("#serviceList").length == 0)
    {
        e.preventDefault();
        $('#serviceList').find('.modal.active').removeClass('active');
    }
    else
        e.preventDefault();
});