JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div class="content" style="display:none">

</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>

<script type="text/javascript">
  $(document).ready(function(){
    var item = $('#tip-source').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])
    }
  })
</script>

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;
}