JSFiddle - React, Tailwind, and code Playground
by Rafael Nepomuceno
HTML
<div class="padding-15" data-produtos-combo-container="">
<div data-produtos-combo-mensagem-sem-produto="" style="display: none;">
<div class="padding-v-10 padding-h-15 border border-radius bg-white"><i class="fa fa-info-circle"></i><span class="margin-l-10">Nenhum produto selecionado.</span></div>
</div>
<div class="margin-hn-5">
<div class="flex flex-wrap w-100p" data-produtos-combo="">
<div class="inline-flex w-33p" data-produto-combo-id="21">
<div class="inline-flex flex-column margin-5 border border-radius box-shadow border-blue-hover relative w-100p"><span class="absolute right-10 top-5 w-25 h-25 z-index-1"><span class="x bg-white-hover color-red-hover border-2 border-white box-shadow-overlay transition" data-produto-combo-remove="21"></span></span>
<div class="relative cursor-pointer"
data-ajax="getProdutoOuComboInformacoesHtml" data-box-img-load="" data-ajax-overlay="" data-id="21" data-loading=""><img src="https://api.cardapp.com.br/produtoimagem/render?type_response=image&empresa=77777777777777777777777777777777777777777777777777&imagem=pizza__aliche__1-destaque.jpg" alt="AlicheSS" class="block w-100p border-radius-t"
data-img-load-destaque="" onload="loadSucessoImgDestaqueCombo(this);" onerror="loadErroImgDestaqueCombo(this);"></div>
<div class="padding-10">
<div class="fs-16 strong"><span class="bg-green w-10 h-10 inline-block border-radius-50"></span> AlicheSS</div>
<div>R$ <span data-preco-produto="">31,90</span></div>
<div class="sep margin-v-5"></div>
<div class="align-right">
<div class="inline-flex flex-center-v margin-t-5"><span class="margin-r-10">Quantidade</span>
<div class="w-70 flex border border-radius border-color-input"...