JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

CSS

.module-cards {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.module-cards .item {
  display: inline-block;
  text-align: center;
  border: 1px solid black;
  cursor: pointer;
}
.module-cards .item:hover {
  background: black;
  color: white;
  border: 1px solid white;
}

JavaScript

let items = [
	{
		pic: "Rectangle 15.png",
		title: "Вязаный шарф",
		location: "Минск, ул. Домодедова 17",
		items: " Зонтик, собаку",
	},
	{
		pic: "jk.png",
		title: "Термокружки 3шт.",
		location: "Минск, ул. Октябрьская 19Б",
		items: "Косметичку, дом",
	},	
];

window.addEventListener("load", function() {
	let fragment = document.createDocumentFragment(),
			moduleCards = document.createElement("div");
	moduleCards.className = "module-cards";
	for(let i = 0; i < items.length; i++) {
		let item = document.createElement("div");
		item.className = "item";
		item.dataset.index = i;
		item.innerHTML = items[i].title + "<br/>" + items[i].location;
		moduleCards.appendChild(item);
	}
	fragment.appendChild(moduleCards);
	document.body.appendChild(fragment);
});

document.body.addEventListener("click", function(e) {
	if (e.target.classList.contains(`item`))
        console.log(items[e.target.dataset.index]);
});