JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="tile-image"></div>
<div class="tile-image"></div>

CSS

.tile-image {
  width: 432px;
  height: 192px;
  border-radius: 4px;
  overflow: hidden;
}

.tile-image img {
  width: 100%;
  height: auto;
}

JavaScript

data = {
  "tiles": [{
      "img": "https://via.placeholder.com/200"
    },
    {
      "img": "https://via.placeholder.com/200"
    }
  ]
};

data.tiles.forEach((item) => {
  let img = new Image();
  img.src = item.img;
  tile = document.getElementsByClassName("tile-image")[0];
  tile.appendChild(img);
});