Customizing and integrated a code pen advanced pricing table to squarespace

Hey guys, I need your help with a CodePen code that I used for one of my client. I integrated it with a code block, but there's still some changes I can't do! Even though I tried, i've been coding only for the past couple months so I'm not an expert (like you guys!!!)

Here is the original CodePen link I used: https://codepen.io/shaneheyns/pen/qgKOVP

Here is my client site's: https://mandarin-dandelion-tsj3.squarespace.com/tous-nos-cours-aquastar (password: freelance)

As you can see, the concept and the bouncing effect works perfectly. The client loves it! But...

1. We would like to show only the tables "cours solo", "cours duo" and "cours de groupe" for the first 4 switchers
2. We would like them to be center-align as well

3. On the switcher "surveillance" we would like to have the 3 tables center-align

4. On the switcher "animation" we would like to have the table center-align

5. And the MOST IMPORTANT, I don't understand why I integrated the CodePen CSS file's, it changes the look of the entire page... In other words, the CSS in the code block should only be applied to the code block and not the entire page (if you look to the other pages, everything is fine in the good sizes)

6. If possible, could you help me with the mobile optimisation also? 

Thanks a lot!!! I'm so lost and I've been working on this pricing table for the past few days... 🫠

Quote

5. And the MOST IMPORTANT, I don't understand why I integrated the CodePen CSS file's, it changes the look of the entire page... In other words, the CSS in the code block should only be applied to the code block and not the entire page (if you look to the other pages, everything is fine in the good sizes)

This is because codepen example code is not necessarily written with Squarespace in mind. In many cases the CSS is not isolated to only apply to the element you are adding. If the CSS code in a code block references h1 for example. Then that style may be applied to the whole page.

This particular code is making a whole bunch of changes to elements like html and body and so it messes up what Squarespace does.

Doing surgery on code that wasn't written for SS can go from easy to complex. This code looks like it would be a medium to complex job.

I can't speaker to the other issues as the first thing to figure out would be if #5 can be addressed.

I have no solutions.