JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<h2>tm = topmenu.</h2><br/>

<div class='menu'>
<span class='tm_greeting'>Greetings, Name!</span>

<span class="tm_tabs">

  
  <input type="radio" name="tm_tabbtn" id="tm_tabbtn1">
  <label for="tm_tabbtn1">1</label>
  
  <input type="radio" name="tm_tabbtn" id="tm_tabbtn2">
  <label for="tm_tabbtn2">2</label>
   
  <input type="radio" name="tm_tabbtn" id="tm_tabbtn3">
  <label for="tm_tabbtn3">3</label>
  
   <input type="radio" checked name="tm_tabbtn" id="tm_tabbtn4">
  <label for="tm_tabbtn4">4</label>
  
  <span id='tm_tab1' class="tm_tab">It's the 17th of Embers, 8:16 AM.</span>
  <span id='tm_tab2' class="tm_tab">Notice about current events.</span>
  <span id='tm_tab3' class="tm_tab">HP: 145/260 -------- MP: 46/50 -------</span>
 <span id='tm_tab4' class="tm_tab">Messages: 0 Wealth: 4578 Gems: 26</span>
  
</span>

</div>

CSS

div,label {box-sizing:border-box;}
.menu {width:930px;padding:5px;border:1px solid grey;margin:20px;display:flex;justify-content:space-between;}

.tm_greeting {}
.tm_tabs {display:flex;flex-direction:row-reverse;}
.tm_tabs input{display:none;}
.tm_tabs label{padding:5px;display:inline;cursor:pointer}
.tm_tabs input:checked + label{background:blue; color:white;border-radius:5px; cursor:default;}
.tm_tab{display:none;padding:5px 10px;float:right;}

#tm_tabbtn1:checked ~ #tm_tab1,
#tm_tabbtn2:checked ~ #tm_tab2,
#tm_tabbtn3:checked ~ #tm_tab3,
#tm_tabbtn4:checked ~ #tm_tab4
{display:block;}