code for u/troncat36 :)

<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>