JSFiddle - React, Tailwind, and code Playground

No-JS Page Switcher using Checkboxes

by skibulk

HTML

<input id="page1" type="radio" name="radioGroup" value="page1" checked>
<input id="page2" type="radio" name="radioGroup" value="page2">
<input id="page3" type="radio" name="radioGroup" value="page3">

<div id="menu">
  <label id="page1Menu" for="page1">Page 1</label>
  <label id="page2Menu" for="page2">Page 2</label>
  <label id="page3Menu" for="page3">Page 3</label>
</div>

<div id="content">
  <div id="page1Content">
    <p>Page 1</p>
  </div>
  <div id="page2Content">
    <p>Page 2</p>
  </div>
  <div id="page3Content">
    <p>Page 3</p>
  </div>
</div>

CSS

input[type=radio] {
  display: none;
}

#page1:checked~#menu #page1Menu,
#page2:checked~#menu #page2Menu,
#page3:checked~#menu #page3Menu
{
  color: red;
}

#content>div {
  display: none;
}

#page1:checked~#content #page1Content,
#page2:checked~#content #page2Content,
#page3:checked~#content #page3Content
{
  display: block;
}