JSFiddle - React, Tailwind, and code Playground

HTML

<div class="work__box">
    <article class="work__thumb work">
        <img class="open" src="http://lorempicsum.com/simpsons/350/200/1" />
        <div class="work_detail" id="work-detail">
            <div class="wrap">
                <div class="work__description clearfix">
                    <h2 class="work__title">Work 1</h2>
                    <div class="work_detail--summary">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo facere optio maiores eveniet ducimus ea enim culpa mollitia atque ipsam reprehenderit facilis error soluta eos ipsum eligendi dolores incidunt delectus.</p>
                    </div>
                    <div class="work--gallery">
                        <img src="http://lorempicsum.com/simpsons/350/200/4"/>
                        <img src="http://lorempicsum.com/simpsons/350/200/2"/>
                        <img src="http://lorempicsum.com/simpsons/350/200/3"/>
                    </div>
                </div>
                <div class="work--close close">-</div>
            </div>
        </div>
    </article>
     <article class="work__thumb work">
        <img class="open" src="http://lorempicsum.com/simpsons/350/200/1" />
        <div class="work_detail" id="work-detail">
            <div class="wrap">
                <div class="work__description clearfix">
                    <h2 class="work__title">Work 1</h2>
                    <div class="work_detail--summary">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo facere optio maiores eveniet ducimus ea enim culpa mollitia atque ipsam reprehenderit facilis error soluta eos ipsum eligendi dolores incidunt delectus.</p>
                    </div>
                    <div class="work--gallery">
                        <img src="http://lorempicsum.com/simpsons/350/200/4"/>
                        <img src="http://lorempicsum.com/simpsons/350/200/2"/>
                        <img...

SCSS

.work__thumb {
    text-align: center;
    img {
         cursor: pointer;  
    }   
}
.work_detail {
    display: none;
    text-align: center;
}

.work--close {
    display: block;
    background: red;
    width: 20px; height: 20px;
    color: #FFF;
    margin: 0 auto;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
}

JavaScript

jQuery(document).ready(function($){

    var $active = false;


    $('.open').click(function(e){
        $(this).parent().find('.work_detail').slideDown();
    });
    
    // FERMER LE BLOC DETAIL AU CLICK
    $('.close').click(function() {
        $(this).closest('.work_detail').slideUp();
    });
});


var scrollTo = function(cible) {
    $('html, body').delay(300).animate({scrollTop: cible.offset().top}, 750);
};