JSFiddle - React, Tailwind, and code Playground

HTML

<div class="study__certificates">
  <button aria-label="Открыть модальное окно с сертификатом" class="button-certificates">
    <img src="https://23mf.ru/assets/gallery/104/66.jpg" alt=" " class="study__certificates-img">       </button>
  <button aria-label="Открыть модальное окно с сертификатом" class="button-certificates">
    <img src="https://ds05.infourok.ru/uploads/ex/0997/0000924e-540da1ee/hello_html_m22c20515.jpg" alt="" class="study__certificates-img">
  </button>
  <button aria-label="Открыть модальное окно с сертификатом" class="button-certificates">
    <img src="https://static.tildacdn.com/tild6636-3330-4666-b338-303561396466/full_s107.jpg" alt="" class="study__certificates-img">
  </button>
  <button aria-label="Открыть модальное окно с сертификатом" class="button-certificates">
    <img src="https://a228.ru/upload/iblock/b78/b78b86e90e2c140ab7ec3341df4a9b2b.jpg" alt="" class="study__certificates-img">
  </button>
</div>
<div id="modalCertificates" class="modal-certificates">
  <button aria-label="Закрыть модальное окно с сертификатом" id="close" class="modal-certificates__close">&times;</button>
  <img class="modal-certificates__content" alt="" id="img01">
  <div class="modal-certificates__overlay id="overlay"></div>
</div>

CSS

.study__certificates{
     width: 500px;
     display: grid;
     grid-template-columns: repeat (2,1fr);
     grid-template-rows: repeat(2, minmax(140px,179px));
     grid-gap: 50px;
/*       */
    margin: 0px auto;
  }
     
.study__certificates-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
}
.button-certificates {
        border: none;
        width: 100%;
        height: 100%;
        background-color: transparent;
        justify-self: center;
        align-self: center;
        cursor: pointer;
        padding: 0;
}
.button-certificates:nth-child(2n-1){
            grid-column: 1;
}
.button-certificates:nth-child(2n){
            grid-column: 2;
}
.modal-certificates{
        visibility: hidden;
        opacity: 0;
        transition: .4s ease-in-out;
        position: fixed;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
}
.modal-certificates__close{
            position: absolute;
            top: 40px;
            right: 85px;
            color: #000;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
            background-color: transparent;
            border: none;
}
.modal-certificates__content{
            margin: auto;
            display: block;
            width: 80%;
            height: 97%;
            object-fit: contain;
            max-width: 700px;
            margin-bottom: 100px;
}
.modal-certificates__overlay{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.9);
            visibility: hidden;
            opacity: 0;
            transition: .4s ease-in-out;
            z-index: -1;
            padding-bottom: 100px;
}

JavaScript

/* const modalButton = document.querySelector('.button-certificates');
var modalImg = document.querySelector('#img01');
var modal = document.getElementById('modalCertificates');
var modalOverlay = document.querySelector('.modal-certificates__overlay');
var closeButton = document.getElementById("close");
var overlay = document.getElementById('overlay');
    
function openModal(){
   modal.style.visibility = "visible";
        modal.style.opacity = "1";
        modalOverlay.style.visibility = "visible";
        modalOverlay.style.opacity = "1";
        document.querySelector('html').classList.add("hystmodal-opened");
}

function closeModal(){

  modal.style.visibility = "hidden";
  modal.style.opacity = "0";
  modalOverlay.style.visibility = "hidden";
  modalOverlay.style.opacity = "0";
  document.querySelector('html').classList.remove("hystmodal-opened");
  
}

modalButton.forEach(el=> el.addEventListener('click', function  (e){
       
        e.preventDefault();
        modalImg.src = el.querySelector('.study__certificates-img').src;
         openModal();
       }
));
            
  
closeButton.onclick = function () {
  closeModal ();
}                
           
modalOverlay.onclick = function closeModal () {
  closeModal ();
             
}

     */
/* const modalButton = document.querySelectorAll('.button-certificates');
    var modalImg = document.querySelector('#img01');
    var modal = document.getElementById('modalCertificates');
    var modalOverlay = document.querySelector('.modal-certificates__overlay'); */
    
    
   /*  const modalButton = document.querySelectorAll('.button-certificates');
        var modalImg = document.querySelector('#img01');
        var modal = document.getElementById('modalCertificates');
        var modalOverlay = document.getElementById('.overlay');
        var close = document.getElementById("close");
        var overlay = document.querySelector('.modal-certificates__overlay');
    
    
    
    
    function...