JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
        <!--=============== REMIXICONS ===============-->
        <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

        <!--=============== BOXICONS ===============-->
        <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>

        <!--=============== CSS ===============-->
        <link rel="stylesheet" href="assets/css/styles.css">
        
    



    </head>
    <body>
     
       

<!--=============== SERVICES ===============-->


<section id="whatweprovide" class="services section__services">
               
                
    <span class="section__subtitle">Our Info Cards</span>
    <h2 class="section__title">What We Provide</h2>

    <div class="services__container container__services grid__services">
        <div class="services__card">
            <h3 class="services__title">Test 4</h3>

            <span class="services__button">
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
        </div>




        <div class="services__card2">
            <h3 class="services__title">Test 3</h3>

            <span class="services__button">
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
        </div>





        <div class="services__card3">
            <h3 class="services__title">Test 2</h3>

            <span class="services__button">
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
        </div>




        <div class="services__card4">
            <h3 class="services__title">Test 1</h3>

            <span class="services__button">
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
        </div>

    

   ...

CSS

/*=============== SERVICES ===============*/
.section__services {
  padding: 4.5rem 0 1rem;
}

.section__title, 
.section__subtitle {
  text-align: center;
}

.section__title {
  font-size: 1.55rem;
  color: var(--first-color);
  margin-bottom: 2rem;
}

.section__subtitle {
  display: block;
  font-size: .813rem;
  color: black;
}

.container__services {
  max-width: 968px;
  margin-left: 1rem;
  margin-right: 1rem;
}

.grid__services {
  display: grid;
  gap: 1.25rem;
}


.services__container {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding-top: 1rem;
}

.services__card {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #4769b878), url(../img/blueflower-removebg-preview.webp) no-repeat top center;
}
.services__card2 {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #c4bc4893), url(../img/yellowflower-removebg-preview.webp) no-repeat top center;
}
.services__card3 {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #b38dd194), url(../img/pinkflower-removebg-preview.webp) no-repeat top center;
}
.services__card4 {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #de6d3498), url(../img/salmonflower-removebg-preview.webp) no-repeat top center;
}

.section__services .services__container .services__card,
.section__services .services__container .services__card2,
.section__services .services__container .services__card3,
.section__services .services__container .services__card4{
z-index: 1;  
box-shadow: 0px 4px 16px rgba(43, 31, 31, 0.228);
border: .5px solid #9cd1f5;

}


.services__title {
  font-size: 1.35rem;
  margin-bottom: 2.5rem;
  color: var(--text-color);
  text-align: center;
}

.services__button {
  color: var(--text-color);
  font-size: .9rem;
  display: flex;
  align-items: center;
  column-gap: .25rem;
  cursor: pointer;
 ...

JavaScript

/*=============== SERVICES MODAL ===============*/
                const modalViews = document.querySelectorAll('.services__modal'),
                      modalBtns = document.querySelectorAll('.services__button'),
                      modalClose = document.querySelectorAll('.services__modal-close')

                let modal = function(modalClick){
                    modalViews[modalClick].classList.add('active-modal')
                }

                modalBtns.forEach((mb, i) =>{
                  mb.addEventListener('click', () =>{
                    modal(i)
                  })
                })

                modalClose.forEach((mc) =>{
                  mc.addEventListener('click', () =>{
                    modalViews.forEach((mv) =>{
                      mv.classList.remove('active-modal')
                    })
                  })
                })


                /*=============== Products MODAL ===============*/
                const modalViews2 = document.querySelectorAll('.services__modal'),
                      modalBtns2 = document.querySelectorAll('.products__button'),
                      modalClose2 = document.querySelectorAll('.services__modal-close')

                let modal2 = function(modalClick){
                    modalViews[modalClick].classList.add('active-modal')
                }

                modalBtns2.forEach((mb, i) =>{
                  mb.addEventListener('click', () =>{
                    modal2(i)
                  })
                })

                modalClose2.forEach((mc) =>{
                  mc.addEventListener('click', () =>{
                    modalViews2.forEach((mv) =>{
                      mv.classList.remove('active-modal')
                    })
                  })
                })