<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.