JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div class='wrap'>
  <div id='welcome' class='welcome'></div>
  <div id='apw' class='apw'></div>
</div>

CSS

.apw, .welcome {
  width: 50%;
  border: 1px solid red;
  padding: 10px;
}
.wrap {
  display: flex;
}

JavaScript

const arrMass2 = document.getElementById('apw');
	const arrMass = document.getElementById('welcome');
  let url = 'https://jsonplaceholder.typicode.com/todos'
  
  function sendRequest(method, url, callback) {
	const xhr = new XMLHttpRequest();
	xhr.open(method,url)
	xhr.setRequestHeader('Content-Types', 'application/json')
	
	xhr.onload = () => {
		if(xhr.status == 200)
		 callback(JSON.parse(xhr.response));
	}
	xhr.send()
}

//111
sendRequest('GET', url,
	(data) => {  
  return data.map(item => {
		arrMass.innerHTML += `
    	<div class="cont">
      	<h3>${item.id}</h3>
        <p><strong>${item.title}</strong></p>
      </div>		 
		`
	})});
//222
function dataSets(method, url) {
	return fetch(url).then(response => {
		return response.json()
	})
}
dataSets('GET', url)
  .then(data => {return data.map(item => {
		arrMass2.innerHTML += `
    	<div class="cont">
      	<h3>${item.id}</h3>
        <p><strong>${item.title}</strong></p>
      </div>		 
		`
	})})