<style>
/* This wraps around the tabs, keeping them all in one area */
.tab-container {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  margin: 10px auto;
  padding: 5px;
  border: 2px solid #252D34;
}

/* Hide the checkbox, do not use display:none as it prevents keyboard users navigating through the tabs */
.tab-container input[type="radio"] {
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  border: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

/* The label of the input, this is what you see and click on instead of an ugly radio button */
.tab-container label {
  order: 1;
  cursor:pointer;
  border-bottom: 2px solid #fff;
  color: #fff;
  padding: 5px 15px;
}

/* The label "tab" when clicked */
.tab-container input[type="radio"]:checked + label {
  border-bottom: 2px solid #374c5d;
  color: #374c5d;
  cursor: default;
}
/* How the label appears to keyboard users when it is focused on  */
.tab-container input[type="radio"]:focus + label {
  outline: 2px solid blue;
}

/* Panel styles */
.tab-container .panel {
  order: 99;
  flex-grow: 1;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}

/* Show panel when corresponding label is clicked
* This is where your tab panel styles like height, padding, backgrounds and fonts go */
.tab-container input[type="radio"]:checked + label + .panel {
  padding: 10px;
  position:relative;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity ease-out 0.2s 0.1s;
  border: 2px solid red;
  height: 150px;
  overflow: auto;
}

/* Tabs to accordion at lower screen widths and on mobile. Inherits all the above tab styles from above */
@media (max-width: 1000px) {
  /* Makes the tabs full width on smaller screens */
  .tab-container {
    width: 100%;
  }
  /* Reorders the tabs so that panels appear under their specific tab, like an accordion */
  .tab-container .panel,
  .tab-container label {
    order: initial;
  }
  /* Sets the label of the tab to full width of the container */
  .tab-container label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
/* Unsets the height of the visible panel so that you don't need to scroll through individual panels as well as the actual page */
  .tab-container input[type="radio"]:checked + label + .panel {
    height: unset;
  }
}
  
/* Vertical ID tabs will be vertical instead */
#vertical.tab-container {flex-direction: column; height: 375px;}
#vertical.tab-container label {width: 15%;}
#vertical.tab-container input[type="radio"]:checked + label + .panel {width: 85%; height:100%; top: 0; overflow: auto;}
@media (max-width: 1000px) {
  #vertical.tab-container {width: 100%; height: unset; flex-direction: row;}
  #vertical.tab-container label {width: 100%;flex-basis: 100%;}
  #vertical.tab-container input[type="radio"]:checked + label + .panel {width: 100%;}
}
</style>
<div class="tab-container">
  
  <input name="tabset1" type="radio" id="tabset1-1" checked="checked" />
  <label for="tabset1-1">Tabset1 - Tab 1 Label</label>
  <div class="panel">
    <h1>Tabset1 - Tab 1 header</h1>
    <p>Tabset1 - Tab 1 paragraph</p>
  </div>

  <input name="tabset1" type="radio" id="tabset1-2" />
  <label for="tabset1-2">Tabset1 - Tab 2 Label</label>
  <div class="panel">
    <h1>Tabset1 - Tab 2 header</h1>
    <p>Tabset1 - Tab 2 paragraph</p>
  </div>

  <input name="tabset1" type="radio" id="tabset1-3" />
  <label for="tabset1-3">Tabset1 - Tab 3 Label</label>
  <div class="panel">
    <h1>Tabset1 - Tab 3 header</h1>
    <p>Tabset1 - Tab 3 paragraph</p>
  </div>
  
</div>

<div id="vertical" class="tab-container">
  
  <input name="vertical" type="radio" id="vertical-1" checked="checked" />
  <label for="vertical-1">Vertical 1 Label</label>
  <div class="panel">
    <h1>Vertical - Tab 1 header</h1>
    <p>Vertical - Tab 1 paragraph</p>
  </div>

  <input name="vertical" type="radio" id="vertical-2" />
  <label for="vertical-2">Vertical 2 Label</label>
  <div class="panel">
    <h1>Vertical Tab 2 header</h1>
    <p>Vertical Tab 2 paragraph</p>
  </div>

  <input name="vertical" type="radio" id="vertical-3" />
  <label for="vertical-3">Vertical 3 Label</label>
  <div class="panel">
    <h1>Vertical Tab 3 header</h1>
    <p>Vertical Tab 3 paragraph</p>
  </div>
  
</div>