JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

CSS

body {
  font-family: system-ui;
}

.row {
  margin: 30px auto;
  text-align: center;
}

img {
  height: 300px;
  margin: 0 auto;
}
img + img {
  margin-left: 10px;
}

JavaScript

const getImageUrl = (tag, view) => `https://images.thenorthface.com/is/image/TheNorthFace/NF0A52SS_${tag}_${view}?wid=1560&hei=1812&fmt=jpeg&qlt=80&resMode=sharp2&op_usm=0.9,1.0,8,0`;

let tags =[
    /* "4M1", */
    "4T5",
    "5E8",
    "5HD",
    "95A",
    /* "993", */
    /* "EF1", */
    "IM1",
    "IPM",
    "IRJ",
    "KY4",
    "KZ3",
    "ND5",
    "OK6",
    "PK1",
    /* "R81", */
    "XRX",
    "YRG",
    "ZU3"
];
// oakley: 5HD
// quincy: 95A

/* tags = ['ND5', '5HD']; */

tags.forEach(tag => {
	const row = document.createElement('div');
  row.innerText = tag;
  row.classList.add('row');

	const views = ['hero', 'int', 'front34'];
  views.forEach(view => {
    const img	= document.createElement('img');
    img.src = getImageUrl(tag, view);
    row.appendChild(img);
  });
  
  document.body.appendChild(row);
});