JSFiddle - React, Tailwind, and code Playground

HTML

<div id="about">

    <div class="wsBox what">
        <div class="wsQ">
            <h1>What</h1>
        </div>
        
        <div class="wsD" style="display: block; display:none">
            <p>what we do short description.  <a href="#" class="lightBoxOpen">Continue Reading...</a><span class="wsFD">This is a lenghty description of what we do.</span></p>
        </div>
    </div>
    
    <div class="wsBox who">
        <div class="wsQ" style="display: block; ">
            <h1>Who</h1>
        </div>
    
        <div class="wsD">
            <p>who we are short description.  <a href="#" class="lightBoxOpen">Continue Reading...</a><span class="wsFD">This is a lenghty description of who we are.</span></p>
        </div>
    </div>
    
    <div style="clear:both; display: block; height: 30px; margin-bottom: 25px"></div>

    <div id="lightBoxOverlay" class="initHide" style="display: none; ">
    <div id="lightBox">
        <a href="#" class="lightBoxClose">Close</a>
        <div id="lightBoxContent"></div>
    </div>
</div>


</div>

CSS

#about{


}
.wsBox{
    padding: 5px;
    position: relative;
    border: 2px solid #669900;
    width: 200px;
    height: 150px;
    border-radius: 20px;
    float:right;
    margin: 2%;
      border-radius: 5%;
      box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}

.wsQ{
    color: green;
    text-align: center;
    line-height: 150px;

}
.wsD{
    height:150px;
    display:none;
    position: absolute;
    top: 50%;
    margin-top:-36px;
}
.wsD .wsFD{
    display: none;
}
.who .wsD{
    margin-top:-50px;    
}

#lightBoxOverlay{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.6);

}
#lightBox{
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    background-color: #ffffff;
    padding: 5px;
    border: 2px solid #669900;
    border-radius: 20px;
    margin: 2%;
    border-radius: 5%;
    box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}
#lightBox a.lightBoxClose{
    float: right;
    font-size: .75em;
    margin-right: 10px;
}

JavaScript

$(document).ready(function() {
    $('#about .wsBox').hover(

    function() {
        $(this).find('.wsQ').fadeOut();
        $(this).find('.wsD').delay(200).fadeIn();

    }, function() {
        $(this).find('.wsD').fadeOut();
        $(this).find('.wsQ').delay(200).fadeIn();
    }

    );

    $('a.lightBoxOpen').click(function(e) {
        $('#lightBoxOverlay').fadeIn();
        $(this)

    });


    $('a.lightBoxClose').click(function(e) {
        $('#lightBoxOverlay').fadeOut();
    });

});