JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
    <li><a href="#tab1">Description</a></li>
    <li><a href="#tab2">Specs</a></li>
</ul>
<div class="pane">
    <div id="tab1">
        <h2>Hello</h2>
        <p>Hello hello hello.</p>
        <p>Goodbye goodbye, goodbye</p>
    </div>
    <div id="tab2" style="display:none;">
        <h2>Hello2</h2>
        <p>Hello2 hello2 hello2.</p>
        <p>Goodbye2 goodbye2, goodbye2</p>
    </div>
</div>
<div class="content">This should really appear on a new line.</div>

CSS

ul.tabs {
          display: table;
          list-style-type: none;
          margin: 0;
          padding: 0;
      }

      ul.tabs>li {
          float: left;
          padding: 10px;
          background-color: lightgray;
      }

      ul.tabs>li:hover {
          background-color: lightgray;
      }

      ul.tabs>li.selected {
          background-color: lightgray;
      }

      div.content {
          border: 1px solid black;
      }

      ul { overflow: auto; }

      div.content { clear: both; }

JavaScript

$(document).ready(function() {
    $("ul.tabs a").click(function() {
        $(".pane div").hide();
        $($(this).attr("href")).show();
    });
})