JSFiddle - React, Tailwind, and code Playground

HTML

<section>
        <div class="container slider">
            <div class="title-container">
                <div class="prepare-text">Preparati</div>
                <div class="slider-controls">
                    <button id="previous"><i class="fa-solid fa-chevron-left"></i></button>
                    <button id="next"><i class="fa-solid fa-chevron-right"></i></button>
                </div>
            </div>
            <div class="cards-container" id="cards-container">
                <!-- Card 1 -->
                <div class="cards">
                    <div class="card-image">
                        <picture>
                            <img class="image-card" src="assets/slider/slide-1.jpeg" alt="slide 1">
                        </picture>
                    </div>
                    <div class="card-footer">
                        <div class="first-footer">
                            <div class="footer-left">
                                Nike Air Zoom SuperRep 3
                            </div>
                            <div class="footer-right">
                                129.99
                            </div>
                        </div>
                        <div class="second-footer">
                            Scarpa da HIIT - Donna
                        </div>
                    </div>
                </div>
                <!-- Card 1 -->
                <!-- Card 2 -->
                <div class="cards">
                    <div class="card-image">
                        <picture>
                            <img class="image-card" src="assets/slider/slide-2.jpeg" alt="slide 2">
                        </picture>
                    </div>
                    <div class="card-footer">
                        <div class="first-footer">
                            <div class="footer-left">
                                Nike Air Zoom SuperRep 3
                            </div>
                            <div...

CSS

.card-popup {
  width: 500px;
  height: 300px;
  background: #ffffff;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999999;
  transform: translate(-50%, -50%);
  animation: fadeIn ease 0.5s;
  -webkit-animation: fadeIn ease 0.5s;
  -moz-animation: fadeIn ease 0.5s;
  -o-animation: fadeIn ease 0.5s;
  -ms-animation: fadeIn ease 0.5s;
}
.card-popup .card-popup-text {
  font-family: "Roboto", serif;
  display: flex;
  justify-content: center;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -1px;
  width: 60%;
  margin: 2rem auto;
  text-align: center;
}
.card-popup .close-card-popup {
  font-size: 2rem;
  margin-right: 1rem;
  position: absolute;
  right: 0;
  cursor: pointer;
}
.card-popup .card-popup-price {
  font-family: "Futura Black", serif;
  display: flex;
  justify-content: center;
  font-weight: 600;
  font-size: 4rem;
  letter-spacing: -1px;
  width: 60%;
  margin: 2rem auto;
  text-align: center;
}
.card-popup .card-popup-center {
  text-align: center;
}
.card-popup .card-popup-center .card-popup-button {
  background: #000;
  border: 0;
  padding: 8px 15px 8px 15px;
  color: #fff;
  border-radius: 20px;
  font-size: 1rem;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn ease 0.5s;
  -webkit-animation: fadeIn ease 0.5s;
  -moz-animation: fadeIn ease 0.5s;
  -o-animation: fadeIn ease 0.5s;
  -ms-animation: fadeIn ease 0.5s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.container.slider .cards-container {
  display: flex;
  overflow-x: hidden;
  gap: 1rem;
}
.container.slider .cards {
 ...

JavaScript

const cards = document.querySelectorAll('.cards')

cards.forEach((card => {

    const getName = card.querySelector('.footer-left')
    const getPrice = card.querySelector('.footer-right')

    function showPopup() {
        const el = document.getElementById('cards-container');
        const popup = document.createElement('div')
        popup.setAttribute('class', 'card-popup')

        popup.innerHTML = '' +
            '<div class="close-card-popup" id="close-card-popup">&times;</div>' +
            '<p class="card-popup-text">Il prezzo di ' + getName.innerText + ' è di:</p>' +
            '<p class="card-popup-price">' + getPrice.innerText + ' €' +
            '<div class="card-popup-center"><button class="card-popup-button">Acquista il prodotto</button></div>'

        const overlay = document.createElement('div')
        overlay.setAttribute('class', 'overlay')
        el.appendChild(overlay)
        el.appendChild(popup)

    }

    card.addEventListener('click', showPopup)



}))