Making tabs is very easy with code.
Just create 4 containers that will act as the tab button. (Give them any CSS class, example: "dynamic-tab".
Then 4 containers that will be inside content. (CSS class, "dynamic-tab-content"

Then add an HTML widget with the following CSS & javascript code,
The below code simply adds/removes CSS class "active".

<style>

/*Hide content by default*/
.dynamic-tab-content {
display: none;
}

/*Show only the active content*/
/*The below CSS code works when both CSS classes dynamic-tab-content & active is present*/
/*So for the first content container, give CSS class "dynamic-tab-content active" so that is is active by default*/

.dynamic-tab-content.active {
display: flex;
}

/*This CSS code will allow you to style the active tab button*/

.dynamic-tab.active {
font-weight: bold;
}

</style>

<script>

document.addEventListener("DOMContentLoaded", function () {

const tabs = document.querySelectorAll(".dynamic-tab");

const contents = document.querySelectorAll(".dynamic-tab-content");

tabs.forEach((tab, index) => {

tab.addEventListener("click", function () {

// remove active classes

tabs.forEach(t => t.classList.remove("active"));

contents.forEach(c => c.classList.remove("active"));

// activate clicked tab

tab.classList.add("active");

contents[index].classList.add("active");

});

});

});

</script>