JSFiddle - React, Tailwind, and code Playground

by jury1

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/template" data-template="listitem">
  <a href="${url}" class="list-group-item">
    <table>
      <tr>
        <td><img src="${img}"></td>
        <td>
          <p class="list-group-item-text">${title}</p>
        </td>
      </tr>
    </table>
  </a>
</script>
<ul class="list-items">
</ul>

JavaScript

function render(props) {
  return function(tok, i) {
    return (i % 2) ? props[tok] : tok;
  };
}

var items = [{
  url: 'http://foo.com',
  img: '/images/bar.png',
  title: 'Lorem Ipsum'
}];

$(function() {
  var itemTpl = $('script[data-template="listitem"]').text().split(/\$\{(.+?)\}/g);

  $('.list-items').append(items.map(function(item) {
    return itemTpl.map(render(item)).join('');
  }));
});