gulp->CSS + JS

You can use hidden checkbox to toggle prices. Follow following code:

<label class="switch" for="price-switch">          // add **for attribute** to link it with checkbox
   <input type="checkbox" id="price-switch">    // Remove this checkbox
   <span class="slider round"></span>
</label>

Place the checkbox as a sibling of <div class="cards-section">.

<input type="checkbox" id="price-switch">
<div class="cards-section">

Then add following styles:

<section class="card">
        <h3 class="card-title">Basic</h3>
        <div class="card-price"> <span class="price-monthly">19.99</span></div>
        <div class="card-price"> <span class="price-annually">199.99</span></div>
       
        // similarly for other cards
        <h3 class="card-title">Professional</h3>
        <div class="card-price"><span class="price-monthly">49.99</span></div>
        <div class="card-price"><span class="price-annually">49.99</span></div>

        // All monthly prices have same css class `price-monthly` and all annual plans have same css class

Hide one of the price category initially:

.price-monthly{
    display: none;
}

when checkbox is checked toggle display property:

#price-switch:checked ~ .cards-section .price-monthly{
    display: block;
}

#price-switch:checked ~ .cards-section .price-annually{
    display: none;
}