JSFiddle - React, Tailwind, and code Playground

by Outrora

HTML

<li class="item produtoDesabilitado" id="1028" style="border: 2px solid rgb(255, 255, 255) !important; height: 346px; padding-bottom: 22px;">
    <div class="product-image-wrapper" style="max-width:180px;">
        <a title="Raio de Sol " class="product-image">
            <img id="product-collection-image-1028" src="raio-sol.jpg" alt="Raio de Sol ">
            <span style="" id="prodIndisponivel" class="prodIndisponivel">Produto IndisponĂ­vel</span>
        </a>
    </div> <!-- end: product-image-wrapper -->
    <h2 class="product-name"><a title="Raio de Sol ">Raio de Sol </a></h2>
    <div class="price-box">
        <span class="regular-price" id="product-price">
        <span class="price">R$46,80</span></span>
    </div>
    </div>
</li>

CSS

.item.produtoDesabilitado {
    background-color: rgba(255,255,255,.2);
    color: rgba(0,0,0,.5);
}
#prodIndisponivel {
  color: black;
}