JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
  <input type="radio" id="tab1" name="tabGroup" class="tab" checked>
  <label for="tab1">Tab 1</label>

  <input type="radio" id="tab2" name="tabGroup" class="tab">
  <label for="tab2">Tab 2</label>

  <input type="radio" id="tab3" name="tabGroup" class="tab">
  <label for="tab3">Tab 3</label>
  <section>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </section>
  <section>
    <p>
      Sit amet consectetur adipiscing elit. Viverra vitae congue eu consequat ac felis. Lorem dolor sed viverra ipsum nunc. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Sit amet cursus sit amet dictum sit amet. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Convallis posuere morbi leo urna molestie at. Sapien faucibus et molestie ac. Dolor morbi non arcu risus quis. At elementum eu facilisis sed odio. Eget nulla facilisi etiam dignissim diam quis. Turpis egestas maecenas pharetra convallis posuere morbi leo urna molestie. Fringilla est ullamcorper eget nulla. Nunc vel risus commodo viverra maecenas accumsan lacus.</p>

  </section>
  <section>
    <p>
      Semper risus in hendrerit gravida rutrum. Purus ut faucibus pulvinar elementum integer enim neque. Euismod nisi porta lorem mollis. Libero id faucibus nisl tincidunt eget. Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Aliquet nibh praesent tristique magna sit amet. Sapien eget mi proin sed libero...

CSS

html,
body {
  font-family: sans-serif;
}

div.tabs>section {
  display: none;
}

div.tab-content:focus {
  display: block;
}

input.tab {
  appearance: none;
}

input.tab+label {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 1rem;
  border-radius: 1rem;
}

input.tab+label:hover{
  background-color: #b0b0b0;
}

input.tab:checked+label {
  background-color: #404040;
  color: #ffffff;
}

input.tab:checked:nth-of-type(1)~section:nth-of-type(1) {
  display: block;
}

input.tab:checked:nth-of-type(2)~section:nth-of-type(2) {
  display: block;
}

input.tab:checked:nth-of-type(3)~section:nth-of-type(3) {
  display: block;
}