JSFiddle - React, Tailwind, and code Playground

HTML

<section class="portfolio">
        <div class="container">
            <div class="portfolio-container">
                <div class="portfolio-container_item">
                    <div class="portfolio-container_item-img">
                        <img src="img/portfolio/1bg.jpg" alt="">
                    </div>
                    <div class="portfolio-container_item-info">
                        <div class="portfolio-container_content">
                            <div class="portfolio-container_item-list">
                               <div class="pcil-container">
                                    <img src="img/portfolio/1bg-1.jpg" alt="" class="portfolio-cil_img active">
                                    <img src="img/portfolio/1bg-2.jpg" alt="" class="portfolio-cil_img">
                                    <img src="img/portfolio/1bg-3.jpg" alt="" class="portfolio-cil_img">
                                    <img src="img/portfolio/1bg-4.jpg" alt="" class="portfolio-cil_img">
                                    <img src="img/portfolio/1bg-5.jpg" alt="" class="portfolio-cil_img">
                                    <img src="img/portfolio/1bg-6.jpg" alt="" class="portfolio-cil_img">
                                    <img src="img/portfolio/1bg-7.jpg" alt="" class="portfolio-cil_img">
                                    <img src="img/portfolio/1bg-8.jpg" alt="" class="portfolio-cil_img">
                                    <img src="img/portfolio/1bg-9.jpg" alt="" class="portfolio-cil_img">
                               </div>
                                <div class="portfolio-close">
                                    <button class="portfolio-close_btn">
                                        <svg id="cancel-icon_btn">
                                            <use xlink:href="#cancel"></use>
                                        </svg>
                                    </button>
                                </div>
                  ...

CSS

.portfolio {
    background-color: #e7e7e7;

}

.portfolio-container {
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    width: 1200px;
    margin: 0 auto;
}

.portfolio-container_item {
    margin: 10px;
    background-color: silver;
    width: calc(33.3333333333% - 20px);
    cursor: pointer;
}

.portfolio-container_item-img>img{
  height: 250px;
  object-fit: cover;
  width: 100%;
  
}

.portfolio-container_item-list {

  height: 100%;
  width: 100%;
  position: absolute;
}

.portfolio-container_content {
  display: none;
  background-color:rgba(0, 0, 0, 0.9);
  height: 100%;
  width: 100%;
  position:fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.portfolio-container_content.active {
  display: block;
}

.portfolio-cil_img {
  display: none;
  max-height:700px; 
  max-width: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  margin: auto;
}

.portfolio-cil_img.active {
  display: block;
}

.portfolio-close{
  padding: 50px;
  z-index: 99;
}

.portfolio-close_btn{
  height: 50px;
  width: 50px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

#cancel-icon_btn {
  width: 100%;
  height: 100%;
  fill: #e7e7e7;
}


.slider-buttons {
  z-index: 55;
  min-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  /* min-height: 100%; */
  padding: 0 10px;
}


.btn-prev, .btn-next{
  height: 50px;
  width: 50px;
  margin: auto 0;
  border: none;
  background-color: #f3f3f3;
  opacity: 0.5;
  transition: .2s;
}

.btn-prev:hover, .btn-next:hover {
  opacity: 1;
}

#arrow-left {
  transform: scale(-1,1);
}

#arrow-left, #arrow-right {
  width: 25px;
  height: 25px;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    let clickImg = document.querySelector('.portfolio-container');
    const colItem = document.getElementsByClassName('portfolio-container_content');

 
    clickImg.addEventListener('click', function(event){
        
        if (event.target.closest('.portfolio-container_item')){
            console.log(event.target);
            let targetItem = this.querySelector('.portfolio-container_content');

            targetItem.classList.add('active');
            document.querySelector('.portfolio-container_item-elem').classList.add('active');
            document.querySelector('body').style.overflow = "hidden";
        }

        clickImg.addEventListener('click', function(e){

            if(e.target.closest('.portfolio-close_btn')){
                document.querySelector('.portfolio-container_content').classList.remove('active');
                document.querySelector('.portfolio-container_item-elem').classList.remove('active');
                document.querySelector('body').style.removeProperty('overflow');
            }
        })
    })
    })