JSFiddle - React, Tailwind, and code Playground

HTML

<section class="cities">
  <a class="city1" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>
  <a class="city2" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>

  <a class="city3" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>

  <a class="city4" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>
</section>

JavaScript

const link = [
'https://www.croatiaweek.com',
'https://www.pinebeach.hr/', 
'https://www.dnevnik.hr/', 
'https://www.costacruises.com/',
'https://www.zadar.hr/',
'https://www.croatia.hr/'
];


const title = [
'Zagreb - Croatia',
'Pakostane - Croatia', 
'Hvar - Croatia', 
'Dubrovnik - Croatia',
'Zadar - Croatia',
'Brac - Croatia'
];

const image = [
'https://www.croatiaweek.com/wp-content/uploads/2015/02/KingTomislav.jpg', 'https://www.pinebeach.hr/photos/modul_2/18052017224635_pine-beach-pakostane-0020.jpg', 'https://image.dnevnik.hr/media/images/920x695/Jul2019/61719533.jpg', 
'https://www.costacruises.com/content/dam/costa/inventory-assets/ports/DBV/24-DUBROVNIK_2880x1536.jpg.image.750.563.low.jpg',
'https://www.hdz-zadar.hr/public/img/home/3_mobile.png',
'https://s27135.pcdn.co/wp-content/uploads/2019/06/Brac-island-878x585.jpg.optimal.jpg'
];

function pickFour(max) {
	const indices = [];
  while (indices.length < 4) {
  	const nextRand = Math.floor(Math.random()*max);
    if (!indices.includes(nextRand)) {
	    indices.push(nextRand);
    }
  }
  return indices
}

function updateUI(index, className) {
	const city = document.querySelector(className);
  city.href = link[index];
  city.querySelector('h2').innerHTML = title[index];
  city.querySelector('img').src = image[index];
}

const indices = pickFour(title.length);

for(let i = 0; i < indices.length; i++) {
	updateUI(indices[i], `.city${i+1}`);
}