JSFiddle - React, Tailwind, and code Playground

HTML

<img class="foto-portfolio" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:5%;">
 <img class="foto-portfolio" src="https://www.w3schools.com/howto/img_snow.jpg" style="width:5%;">
 <img class="foto-portfolio" src="https://media.gettyimages.com/photos/arch-bridge-in-kromlau-picture-id539121576?s=612x612" style="width:5%;">


<div id="myModal" >
  <img class="modal-content" id="img">
  <span class="close" >&times;</span>
</div>

CSS

#myModal {
  display: none;
  width: 100%; 
  height: 100%; 
  
}
.close {
  font-size: 100px;
}

JavaScript

var placeImage = document.getElementById('myModal');
var bigImage = document.getElementById("img");
var images = document.getElementsByClassName("foto-portfolio");


images.forEach((image) => {
  image.onclick = function() {
    placeImage.style.display = "block";
    bigImage.src = this.src;
  }
});

var close = document.getElementsByClassName("close")[0];

close.onclick = function() { 
  placeImage.style.display = "none";
}