Creating CMS page with tabs

Turn on the HTML view by pressing "< >" symbol in the page editor window. Then paste the following code:

<style>
  #cms-page .full-page .page-header {
    display: none;
  }

  .adv-tabs {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .adv-tabs .tab-input {
    display: none;
  }

  .adv-tabs .tab-input+.tab-label {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 10px;
    font-size: 14px;
    text-transform: capitalize;
  }

  .adv-tabs .tab-input~.tab-content {
    display: none;
  }

  .adv-tabs .tab-input:checked + .tab-label,
  .adv-tabs .tab-label:hover {
    background: var(--main-primary);
    color: var(--main-primary-text);
    border-bottom: 1px solid var(--main-primary);
    margin-bottom: -1px;
  }

  .adv-tabs .tab-content {
    padding-top: 20px;
    border-top: 1px solid var(--main-third-background);
  }

  @media screen and (max-width: 700px) {
    .adv-tabs {
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .adv-tabs .tab-input+.tab-label {
      padding: 5px 15px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      margin-right: 3px;
    }
    .adv-tabs .tab-content {
      padding-top: 10px;
    }
  }

  /* show contents only for selected tab */
  .adv-tabs #tab1:checked ~ .tab-content.content1,
  .adv-tabs #tab2:checked ~ .tab-content.content2,
  .adv-tabs #tab3:checked ~ .tab-content.content3 {
    display: block;
  }
</style>

Paste the following code below:

<div class="adv-tabs">
  <input type="radio" name="tabs" id="tab1" class="tab-input" checked="">
  <label class="tab-label" for="tab1" id="first-tab">Tab1</label>
  <input type="radio" name="tabs" id="tab2" class="tab-input">
  <label class="tab-label" for="tab2">Tab2</label>
  <input type="radio" name="tabs" id="tab3" class="tab-input">
  <label class="tab-label" for="tab3">Tab3</label>

  <div class="tab-content content1">Tab1 Contents</div>
  <div class="tab-content content2">Tab2 Contents</div>
  <div class="tab-content content3">Tab3 Contents</div>
</div>

To add visible in all tabs simply add it before or after step 2.

Change content provided in step 2 as you require. You can add as much tabs as you need and name them as you want. Important part is that if you create new tabs, you need to update styles too. This can be done in part1 (styles) at the last step block. For example if you add fourth tab:

<input type="radio" name="tabs" id="tab4" class="tab-input">
<label class="tab-label" for="tab4">New tab</label>

<div class="tab-content content4">New tab content</div>

Update style to look like:

  .adv-tabs #tab1:checked ~ .tab-content.content1,
  .adv-tabs #tab2:checked ~ .tab-content.content2,
  .adv-tabs #tab3:checked ~ .tab-content.content3,
  .adv-tabs #tab4:checked ~ .tab-content.content4 {
    display: block;
  }

IMPORTANT NOTE: id, for and content numbers should have same number

<style>
  #cms-page .full-page .page-header {
    display: none;
  }

  .adv-tabs {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .adv-tabs .tab-input {
    display: none;
  }

  .adv-tabs .tab-input+.tab-label {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 10px;
    font-size: 14px;
    text-transform: capitalize;
  }

  .adv-tabs .tab-input~.tab-content {
    display: none;
  }

  .adv-tabs .tab-input:checked + .tab-label,
  .adv-tabs .tab-label:hover {
    background: var(--main-primary);
    color: var(--main-primary-text);
    border-bottom: 1px solid var(--main-primary);
    margin-bottom: -1px;
  }

  .adv-tabs .tab-content {
    padding-top: 20px;
    border-top: 1px solid var(--main-third-background);
  }

  @media screen and (max-width: 700px) {
    .adv-tabs {
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .adv-tabs .tab-input+.tab-label {
      padding: 5px 15px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      margin-right: 3px;
    }
    .adv-tabs .tab-content {
      padding-top: 10px;
    }
  }

  /* show contents only for selected tab */
  .adv-tabs #tab1:checked ~ .tab-content.content1,
  .adv-tabs #tab2:checked ~ .tab-content.content2,
  .adv-tabs #tab3:checked ~ .tab-content.content3 {
    display: block;
  }
</style>
<div class="adv-tabs">
  <input type="radio" name="tabs" id="tab1" class="tab-input" checked="">
  <label class="tab-label" for="tab1" id="first-tab">Tab1</label>
  <input type="radio" name="tabs" id="tab2" class="tab-input">
  <label class="tab-label" for="tab2">Tab2</label>
  <input type="radio" name="tabs" id="tab3" class="tab-input">
  <label class="tab-label" for="tab3">Tab3</label>

  <div class="tab-content content1">Tab1 Contents</div>
  <div class="tab-content content2">Tab2 Contents</div>
  <div class="tab-content content3">Tab3 Contents</div>
</div>