<style>
#my-tabs {
position: absolute;
top: 535px;
left: 365px;
z-index: 10;
}
.tabs {
max-width: 305px;
margin: 10px auto;
font-family: 'Arial', sans-serif;
background: #d0d3dc;
border: 1px solid #e0e0e0;
border-radius: 10px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
padding: 8px;
}
.tabs input[type="radio"] {
display: none;
}
.tab-labels {
display: flex;
background: #8c939a8f;
border-radius: 10px;
overflow: hidden;
margin-bottom: 6px;
cursor: pointer;
}
.tab-labels label {
flex: 1;
padding: 4px;
text-align: center;
background-color: #aab2bd6b;
border-right: 1px solid #ddd;
font-weight: normal;
transition: background-color 0.3s ease, transform 0.2s ease;
display: flex;
justify-content: center;
align-items: center;
color: #666;
font-size: 9px;
border-radius: 10px 10px 0 0;
white-space: nowrap;
}
.tab-labels label:last-child {
border-right: none;
}
.tab-labels label:hover {
background-color: #e6e6e6;
transform: scale(1.05);
}
input#tab1:checked ~ .tab-labels label[for="tab1"],
input#tab2:checked ~ .tab-labels label[for="tab2"],
input#tab3:checked ~ .tab-labels label[for="tab3"],
input#tab4:checked ~ .tab-labels label[for="tab4"],
input#tab5:checked ~ .tab-labels label[for="tab5"],
input#tab6:checked ~ .tab-labels label[for="tab6"] {
background-color: #aab2bd6b;
border-bottom: 2px solid #aab2bd6b;
font-weight: bold;
color: #636468;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.tab-content {
display: none;
padding: 8px;
font-size: 11px;
background-color: #d0d3dc78;
border: 2px solid #e0e0e0;
border-top: none;
border-radius: 6px;
box-shadow: 0 2px 5px #00000094;
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.4s ease, height 0.4s ease;
}
input#tab1:checked ~ .tab-content.tab1,
input#tab2:checked ~ .tab-content.tab2,
input#tab3:checked ~ .tab-content.tab3,
input#tab4:checked ~ .tab-content.tab4,
input#tab5:checked ~ .tab-content.tab5,
input#tab6:checked ~ .tab-content.tab6 {
display: block;
opacity: 1;
height: auto;
}
.table-section:nth-child(6),
.table-section:nth-child(7) {
display: none;
}
</style>
<div class="tabs" id="my-tabs">
<input type="radio" name="tabset" id="tab1" checked>
<input type="radio" name="tabset" id="tab2">
<input type="radio" name="tabset" id="tab3">
<input type="radio" name="tabset" id="tab4">
<input type="radio" name="tabset" id="tab5">
<input type="radio" name="tabset" id="tab6">
<div class="tab-labels">
<label for="tab1">Tab 1</label>
<label for="tab2">Tab 2</label>
<label for="tab3">Tab 3</label>
<label for="tab4">Tab 4</label>
<label for="tab5">Tab 5</label>
<label for="tab6">Tab 6</label>
</div>
<div class="tab-content tab1">Content for Tab 1</div>
<div class="tab-content tab2">Content for Tab 2</div>
<div class="tab-content tab3">Content for Tab 3</div>
<div class="tab-content tab4">Content for Tab 4</div>
<div class="tab-content tab5">Content for Tab 5</div>
<div class="tab-content tab6">Content for Tab 6</div>
</div>
Comments
Comments disabled.