JSFiddle - React, Tailwind, and code Playground

HTML

<div class="showHide">Show modal
    <div class="showHide modal" style="display:none">
    <div class="modal-inside">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere architecto ullam molestias? Ipsa voluptatibus magnam, similique sapiente voluptatum optio ad labore explicabo quibusdam harum corporis iste. Sequi quibusdam qui rerum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit obcaecati blanditiis, tempore deserunt rem nisi quae modi eum, tenetur natus error dicta voluptatum autem repudiandae quisquam quibusdam officiis quod aliquam.</p>
    </div>
    </div>
</div>

CSS

.modal {
    min-height: 100%;
    min-width: 100%;
    background: rgb(177, 8, 8);
    position: fixed;
    top: 0;
    display: none;
    z-index: 0;
}
.modal-inside {
    width: 75%;
    margin: 10% auto;
    background: white;
    color: black;
    box-sizing: border-box;
    padding: 2%;
    border-radius: 10px;
}

JavaScript

$(".showHide").click(function (e) {
    e.stopPropagation();
    jQuery(this).children('.showHide').toggle();
});