JSFiddle - React, Tailwind, and code Playground

HTML

<li style="background-image: url(fotoSYS)" class="produtos f-left margin-right-30 margin-top-30 ">
  <div style="background-color:codigoSYS"class="marcador"></div>
  <h2>tituloSYS</h2>
</li>

CSS

.produtos{
    width: 294px;
    height: 349px;
    background-color: #f1f2f2;
    border: 3px solid transparent;
    position: relative;
    cursor: pointer;
    transition: all .4s ease-out;
}
.produtosHover{
    border-color: #dddb00;
    box-shadow: 0 0 25px gray;
    margin-top: 15px;
    <!--display: none;-->
}

JavaScript

$(".produtos").hover(
  function() {
    //$(this).children(".produtosHover").show();
    $(this).addClass("produtosHover");
  },
  function() {
    //$(this).children(".produtosHover").hide();
    $(this).removeClass("produtosHover");
  }
);