<div class="tabs">
  <!-- Tab buttons -->
  <input type="radio" id="tab1" name="tab" checked>
  <label for="tab1" class="tab-label">Tab 1</label>

  <input type="radio" id="tab2" name="tab">
  <label for="tab2" class="tab-label">Tab 2</label>

  <input type="radio" id="tab3" name="tab">
  <label for="tab3" class="tab-label">Tab 3</label>

  <!-- Tab content -->
  <div class="tab-content" id="content1">
    <p>This is the content of Tab 1.</p>
  </div>
  <div class="tab-content" id="content2">
    <p>This is the content of Tab 2.</p>
  </div>
  <div class="tab-content" id="content3">
    <p>This is the content of Tab 3.</p>
  </div>
</div>
.tabs {
  width: 500px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  background-color: #fff;
}

.tab-label {
  display: inline-block;
  width: 25%;
  padding: 10px;
  text-align: center;
  background-color: #e9e9e9;
  cursor: pointer;
  font-weight: bold;
  color: #333;
  transition: background-color 0.3s;
}

.tab-label:hover {
  background-color: #ddd;
}

input[type="radio"] {
  display: none;
}

/* Display the first tab as active */
input[type="radio"]:checked + .tab-label {
  background-color: #007bff;
  color: white;
}

/* Tab content styling */
.tab-content {
  display: none;
  padding: 20px;
  border-top: 1px solid #ccc;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.