JSFiddle - React, Tailwind, and code Playground

HTML

<div class="produtosDestaqueBoxItem">
    <div class="produtosDestaqueBoxItemCentralizar">
        <div class="imgFake"></div>
    </div>
</div>

<div class="produtosDestaqueBoxItem">
    <div class="produtosDestaqueBoxItemCentralizar">
        <div class="imgFake"></div>
    </div>
</div>

<div class="produtosDestaqueBoxItem">
    <div class="produtosDestaqueBoxItemCentralizar">
        <div class="imgFake"></div>
    </div>
</div>

<div class="clearfix"></div>

<div class="produtoDestaqueBox">teste</div>

CSS

.produtosDestaqueBoxItem {
    float:left;
    margin:10px;
    width:131px;
    height:120px;
}

.imgFake {
    width:131px;
    height:120px;
    background:#000;
    display:block;
}

.produtoDestaqueBox {
    display:none;
}

.clearfix {
    clear:both;
}

JavaScript

$(function(){
    $(".produtosDestaqueBoxItem").click(function () {
        $(this).find('.imgFake').hide();
        $('.produtoDestaqueBox').show();
    }, function(){
        $(this).find('.imgFake').show();
        $('.produtoDestaqueBox').hide();
    });
});