1032b–Tabs with Flexbox and Radio Button

Background

Please start by using the following Codepen:

https://codepen.io/makzan/pen/zYGwgGm

Requirement

Given the following HTML, please follow the steps to implement a CSS only tabs with flexbox and radio buttons.

<div class='tabs'>
  <!-- Flattern structure for adjacent sibling combinator -->

  <!-- Tab 1 & Content -->
  <input type="radio" name="tab" id="tab1" checked>
  <label for="tab1">Tab 1</label>
  <section>
    <h2>Content of Tab 1</h2>
    <p>Hello World</p>
  </section>

  <!-- Tab 2 & Content -->
  <input type="radio" name="tab" id="tab2">
  <label for="tab2">Tab 2</label>
  <section>
    <h2>Content of Tab 2</h2>
    <p>Hello World</p>
  </section>

  <!-- Tab 3 & Content -->
  <input type="radio" name="tab" id="tab3">
  <label for="tab3">Tab 3</label>
  <section>
    <h2>Content of Tab 3</h2>
    <p>Hello World</p>
  </section>

  <!-- Tab 4 & Content -->
  <input type="radio" name="tab" id="tab4">
  <label for="tab4">Tab 4</label>
  <section>
    <h2>Content of Tab 4</h2>
    <p>Hello World</p>
  </section>

</div>

Help

❓ Show help content

Notes