Tryit Editor v2.9

Edit This Code:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../lib/w3.css">
<style>
.city {display:none}
</style>
<body class="w3-container"><br>

<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">Open Tabbed Modal</button>

<div id="id01" class="w3-modal">
 <div class="w3-modal-content w3-card-4 w3-animate-zoom">
  <header class="w3-container w3-blue"> 
   <span onclick="document.getElementById('id01').style.display='none'" 
   class="w3-closebtn w3-padding-top">&times;</span>
   <h2>Header</h2>
  </header>

  <ul class="w3-pagination w3-white w3-border-bottom" style="width:100%;">
   <li><a href="tryit.asp-filename=tryw3css_modal_tab.html#" class="tablink" onclick="openCity(event, 'London')">London</a></li>
   <li><a href="tryit.asp-filename=tryw3css_modal_tab.html#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a></li>
   <li><a href="tryit.asp-filename=tryw3css_modal_tab.html#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
  </ul>

  <div id="London" class="w3-container city">
   <h1>London</h1>
   <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <div id="Paris" class="w3-container city">
   <h1>Paris</h1>
   <p>Paris is the capital of France.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div id="Tokyo" class="w3-container city">
   <h1>Tokyo</h1>
   <p>Tokyo is the capital of Japan.</p><br>
  </div>

  <div class="w3-container w3-light-grey w3-padding">
   <button class="w3-btn w3-right w3-white w3-border" 
   onclick="document.getElementById('id01').style.display='none'">Close</button>
  </div>
 </div>
</div>

<script>
document.getElementsByClassName("tablink")[0].click();

function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].classList.remove("w3-light-grey");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.classList.add("w3-light-grey");
}
</script>
 
</body>
</html>