JSFiddle - React, Tailwind, and code Playground

HTML

<d-tabs>
  <button slot="tabs">Title</button>
  <button slot="tabs">Title 2</button>
  <button slot="tabs">Title 3</button>
  <section>Panel</section>
  <section hidden>Panel 2</section>
  <section hidden>Panel 3</section>
</d-tabs>

<div id="tabs"></div>

CSS

#tabs {
  height: 10px;
  background: lightgray;
  border-bottom: 1px solid;
}

JavaScript

class Tabs extends HTMLElement {
  constructor() {
    super();

    // Attach a shadow root to <d-tabs>.
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>#tabs { border-bottom: 1px solid red; }</style>
      <div id="tabs">
      	<slot name="tabs" />
      </div>
      <div id="panels">
      	<slot />
      </div>
    `;
  }
}

customElements.define('d-tabs', Tabs);