JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div class="content" style="display:none">
icone-bandeira.png/SOMOS UMA EMPRESA 100% BRASILEIRA;
icone-100.png/NÃO USAMOS NENHUM PRODUTO DE ORIGEM ANIMAL;
icone-mao.png/TODOS OS NOSSOS PRODUTOS SÃO FEITOS A MÃO;
icone-folha.png/SOMOS SUSTENTÁVEIS E CUIDAMOS DO NOSSO PLANETA;
</div>

<figure class="tip-bar-banner" data-index="0">  
  <img src="" alt=""/>
  <figcaption></figcaption>
</figure><!--
--><figure class="tip-bar-banner" data-index="1">  
  <img src="" alt=""/>
  <figcaption></figcaption>
</figure><!--
--><figure class="tip-bar-banner" data-index="2">  
  <img src="" alt=""/>
  <figcaption></figcaption>
</figure><!--
--><figure class="tip-bar-banner" data-index="3">  
  <img src="" alt=""/>
  <figcaption></figcaption>
</figure>

<div id="result"></div>

CSS

* {
  margin: 0;
  padding: 0
}

.tip-bar-banner {
  width: 25%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.tip-bar-banner img {
  margin-top: 15px;
  margin-bottom: 15px;
}

JavaScript

var item = $('.content').text().split(';');

for (var i = 0; i < item.length; i++) {
	var text = item[i].split('/');
  
  $('.tip-bar-banner[data-index="'+i+'"] img').attr('src', 'https://lojafata.vteximg.com.br/arquivos/'+text[0]);
  
  $('.tip-bar-banner[data-index="'+i+'"] figcaption').text(text[1])
}