W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https:/edu/w3css/5/w3.css">
<body class="w3-container">

<h2>Tabs in a FlexBox</h2>

<a href="#" class="tablink w3-button w3-bottombar w3-hover-light-grey"
style="flex:1" onclick="openCity(event, 'London')">London
</a>

<a href="#" class="tablink w3-button w3-bottombar w3-hover-light-grey"
style="flex:1" onclick="openCity(event, 'Paris')"> Paris </a>

<a href="#" class="tablink w3-button w3-bottombar w3-hover-light-grey"
style="flex:1" onclick="openCity(event, 'Tokyo')">Tokyo </a>

</div>

<div id="London" class="w3-container city" style="display:none">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="w3-container city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital city of France.</p>
</div>

<div id="Tokyo" class="w3-container city" style="display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital city of Japan.</p>
</div>

cities.forEach(city => {
    city.style.display = "none";
  });

tablinks.forEach(tablink => {
    tablink.classList.remove("w3-border-red");
  });

document.getElementById(cityName).style.display = "block";
  evt.currentTarget.classList.add("w3-border-red");
}
</script>

</body>
</html>