<!-- 

this example is just basically to show the method for the reverse round corners on adjoining tabs.

You could probably use a basic html details/summary and no js or the :target method or checkbox hack etc.

-->

<div class="tabwrap">
  <ul class="tabs">
    <li class="t1 active" data-destination="#tab1"><a href="#">Tab 1</a></li>
    <li class="t2" data-destination="#tab2"><a href="#">Tab 2</a></li>
    <li class="t3" data-destination="#tab3"><a href="#">Tab 3</a></li>
    <li class="t4" data-destination="#tab4"><a href="#">Tab 4</a></li>
    <li class="t5" data-destination="#tab5"><a href="#">Tab 5</a></li>
  </ul>
  <div id="tab1" class="tab tab1 sectionActive">Tab 1</div>
  <div id="tab2" class="tab tab2">Tab 2</div>
  <div id="tab3" class="tab tab3">Tab 3</div>
  <div id="tab4" class="tab tab4">Tab 4</div>
  <div id="tab5" class="tab tab5">Tab 5</div>
</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background: #ccc;
}
:root {
  --gap: 16px; /* could use rem but wanted to avoid rounding errors */
  --tab-color: red; /* active tab color and panel color. Must be the same */
  --tab-color2: white; /* inactive tab color */
}
.tabwrap {
  max-width: 800px;
  margin: 2rem auto;
}

.tabs {
  display: flex;
  padding: 0;
  margin: 0;
  gap: var(--gap);
  list-style: none;
}
.tab {
  margin: auto;
  padding: 1rem;
  background: var(--tab-color);
  border: 1px solid #000;
  border-top: none;
}
.tabs li {
  display: flex;
  flex: 1 0 0;
  position: relative;
}
.tabs li a {
  background: var(--tab-color2);
  display: flex;
  padding: 1rem;
  flex: 1 0 0;
  border-radius: 10px 10px 0 0;
  border: 1px solid #000;
  color: #000;
  text-decoration: none;
}
.tabs li.active a {
  background: var(--tab-color);
  color: #fff;
  border-bottom: transparent;
}
.tabs li:after,
.tabs li:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 1rem;
  bottom: 0;
  width: 18px;
  border-bottom: 1px solid #000;
}
.tabs li:after {
  right: -17px;
}
.tabs li:before {
  left: -17px;
  border-bottom: transparent;
}
.tabs li.active:after {
  border-radius: 0 0 0 10px;
  border: 1px solid #000;
  border-top: none;
  box-shadow: 0 10px var(--tab-color); /* this is necessary or a gap will show */
}
.tabs li.active:before {
  border-radius: 0 0 10px 0;
  border: 1px solid #000;
  border-top: none;
  box-shadow: 0 10px var(--tab-color); /* this is necessary or a gap will show */
}
.tabs li:last-child:after,
.tabs li:first-child:before {
  display: none;
}

/* logic for tab display*/

.tab {
  display: none;
}
.sectionActive {
  display: block;
}

/* different colors */
.t1.active,
.tab1.sectionActive {
  --tab-color: red;
}
.t2.active,
.tab2.sectionActive {
  --tab-color: orange;
}

.t3.active,
.tab3.sectionActive {
  --tab-color: green;
}

.t4.active,
.tab4.sectionActive {
  --tab-color: cyan;
}

.t5.active,
.tab5.sectionActive {
  --tab-color: teal;
}

/* 
 Important!!!
 Remember you will need to add media queries for small screens and possibly change the design to side tabs intead or an accordion type display.

*/

/* If using :target or the checkbox hack you could  use the :has selector for modern browsers to open the tabs

e.g. 

.tabwrap:has(.t1.active) .tab1,
.tabwrap:has(.t2.active) .tab2,
.tabwrap:has(.t3.active) .tab3,
.tabwrap:has(.t4.active) .tab4,
.tabwrap:has(.t5.active) .tab5 {
  display: block;
}
) */

(function () {
  const items = document.querySelectorAll(".tabs li");
  const sections = document.querySelectorAll(".tab");

  items.forEach((item, index) => {
    item.addEventListener("click", (event) => {
      event.preventDefault();
      var activeTab = item.dataset.destination;
      removeActiveClass();
      removeSectionClass();
      document.querySelector(activeTab).classList.add("sectionActive");
      item.classList.add("active");
    });
  });

  function removeActiveClass() {
    items.forEach((item, index) => {
      item.classList.remove("active");
    });
  }

  function removeSectionClass() {
    sections.forEach((section, index) => {
      section.classList.remove("sectionActive");
    });
  }
})();