JSFiddle - React, Tailwind, and code Playground

by zoomieos

HTML

<div class="tabs-item">

</div>

JavaScript

var countryInfo = [
        {
          name: 'Монголия',
          value: 'Монголия',
          icon: null,
          link: '/trans/mongolia'
        },
        {
          name: 'Москва',
          value: 'Москва',
          icon: null,
          link: '/trans/moscow',
        },
        {
          name: 'Китай',
          value: 'Китай',
          icon: null,
          link: '/trans/china'
        },
        {
          name: 'Минск',
          value: 'Минск',
          icon: null,
          link: '/trans/minsk'
        },
        {
            name: 'Иран',
            value: 'Иран',
            icon: null,
            link: '/trans/iran'
          },
      ]
 
function createTabs() {

    var mainElem = document.querySelector('.tabs-item');
    let newElems = document.createElement('div');
    newElems.className = 'tabs';
    let arrayElems = [];

    for(let i = 0; i < countryInfo.length; i ++) {
    newElems.innerHTML = `<img src="${countryInfo[i].icon}">
        <h2>Доставка грузов из ${countryInfo[i].name}</h2>
        <img src=""/>
    `
    arrayElems.push(newElems);
    }
    console.log(arrayElems)
    for(let i = 0; i < arrayElems.length; ++i) {
        mainElem.appendChild(arrayElems[i]);
    }
}
createTabs();