JSFiddle - React, Tailwind, and code Playground

HTML

<input class="opensModal" type="text" />
    
    <div class="modalOverlay is-inactive">
        <div class="modal">
            <input type="checkbox" />
            <input type="checkbox" />
            <button>Ok</button>
            <button>Cancel</button>
        </div>
    </div>

CSS

.modalOverlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        -webkit-transition: 0.6s;
    }
    
    .modalOverlay.is-inactive {
        visibility: hidden;
        background: rgba(0, 0, 0, 0);
    }
    
    .modalOverlay.is-active {
        visibility: visible;
        background: rgba(0, 0, 0, 0.4);
    }
    
    .modal {
        margin: 100px auto;
        background: #fff;
        width: 100px;
        padding: 20px;
        -webkit-transition: 0.4s 0.6s;
    }
    
    .modalOverlay.is-inactive .modal {
        visibility: hidden;
        opacity: 0;
        -webkit-transform: scale(0.1);
    }
    
    .modalOverlay.is-active .modal {
        visibility: visible;
        opacity: 1;
        -webkit-transform: scale(1);
    }

JavaScript

(function () {
        var $modal = $('.modalOverlay'),
            openModal = function () {
               $modal
                   .removeClass('is-inactive')
                   .addClass('is-active');
            },
            closeModal = function () {
                $modal
                   .removeClass('is-active')
                   .addClass('is-inactive');
            },
            onDocReady = function () {
                $('.opensModal').on('focus', openModal);
            };
        
        $(onDocReady);
    })();