JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="card">
    <button class="btn">BTN</button>
  </div>
  <div class="card">
    <button class="btn">BTN</button>
  </div>
  <div class="card">
    <button class="btn">BTN</button>
  </div>
</div>
<div class="popup"><span class="cross">X</span></div>

SCSS

.container{
  display: flex;
  gap: 30px;
}
.card{
  width: 200px;
  height: 200px;
  background-color: #000;
}
.popup{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background-color: green;
  width: 300px;
  height: 300px;
  
  
  &.-open{
    transform: translate(-50%, -50%) scale(1);
  }
}

JavaScript

const cardRecommended = document.querySelectorAll('.card') 
const favoriteBtn = document.querySelectorAll('.btn')
const popupRecommended = document.querySelector('.popup')
const popupCross = document.querySelector('.cross')

cardRecommended.forEach((card) => {
  card.addEventListener('click', (e) => {
    if (popupRecommended.classList.contains('-open') || e.target.classList.contains('favorite-btn')) return;
    popupRecommended.classList.add('-open');
    document.body.classList.add('-lock');
  })
})



popupCross.addEventListener('click', function () {
   if (popupRecommended.classList.contains('-open')) {
      popupRecommended.classList.remove('-open')
   }
})