1032b–Tabs with Flexbox and Radio Button

Media Files

No media files provided.

Project Submission

+ Submit Assignment

Your submissions


Please start by using the following Codepen:



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>
    <h2>Content of Tab 1</h2>
    <p>Hello World</p>

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

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

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



❓ Show help content