JSFiddle - React, Tailwind, and code Playground

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, sequi numquam, quod molestiae odio tenetur dolor eligendi mollitia eius dolorem minus? Harum, pariatur aperiam architecto provident nobis, facilis praesentium asperiores.
</p>
<div aria-role="tablist" aria-label="An example set of tabs on a fictional subject">
  <div class="tabs">
      <a href="#general-info" for="general-info" aria-role="tab" aria-controls="general-info" tabindex="0">General info</a>
  <a href="#specs" aria-role="tab" aria-controls="specs">Specs</a>
  </div>
  <section class="toggle-target" aria-role="tabpanel" id="general-info">
    <p>
      This is a placeholder for actual general information about a product
    </p>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa enim libero aliquam doloremque vitae aspernatur illo harum repellendus. Rerum recusandae facilis blanditiis dignissimos incidunt distinctio, numquam nostrum esse aperiam assumenda.</div>
    <div>Corporis labore corrupti magnam ut quidem facere error odio fugiat. Blanditiis sint ipsum, dolore consequatur obcaecati, magni hic sapiente mollitia eum necessitatibus adipisci nihil molestiae, velit eveniet, dolores cumque sed.</div>
    <div>Incidunt nobis ex, aperiam blanditiis provident voluptatem a eligendi soluta maiores enim. Sint soluta quod, sit sequi animi enim quasi. Ratione id, suscipit harum deserunt, nobis architecto illum sapiente explicabo.</div>
    <div>Iusto ex minima quaerat nisi in voluptatem ipsam eaque delectus, ratione minus commodi, eveniet corporis? Provident, amet iure natus. Velit eos, esse quibusdam itaque. Eaque, et, sed. Quaerat alias, delectus.</div>
    <div>Itaque architecto laboriosam iure neque quasi, sequi nihil obcaecati reiciendis dignissimos, magni aut est minus deleniti odio soluta officia quia facilis aliquam ex nam excepturi voluptatibus aliquid, inventore. Deleniti, ullam!</div>
  </section>

  <section class="toggle-target" aria-role="tabpanel"...

CSS

.toggle-target {
  margin: 1em;
  max-height: 10em;
  overflow-y: auto;

/* important bits from here up to the "themeing" block */
  display: none;
}

.toggle-target:target {
  display: block;
}

/* themeing */
body { font-family: sans-serif; }

[aria-role="tablist"] {
  background: linear-gradient(to bottom, lightblue 0%, steelblue 100%);
  height: 15em;
  margin: 1em;
  border-radius:1em;
}

[aria-role="tab"] {
  display: block;
  flex: 1;
  line-height: 3em;
  background:
    linear-gradient(to bottom, steelblue 0%, lightblue 100%);
  text-align: center;
  text-decoration: none;
  color:black;
}

[aria-role="tab"]:first-child {
  border-top-left-radius: 1em;
}

[aria-role="tab"]:last-child {
  border-top-right-radius: 1em;
}

[aria-role="tab"]:active {
  background: green;
}

.tabs {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}