JSFiddle - React, Tailwind, and code Playground

HTML

<div class="radio">
<input name="tab" id="button1" class="tabs" checked="checked" type="radio" /><label for="button1"><img src="pixel.gif" alt="" />Button 01</label>
<input name="tab" id="button2" class="tabs" type="radio" /><label for="button2"><img src="pixel.gif" alt="" />Button 02</label> 
<input name="tab" id="button3" class="tabs" type="radio" /><label for="button3"><img src="pixel.gif" alt="" />Button 03</label>

<div id="x1" class="inhalt"><p>Inhalt 01</p></div>
<div id="x2" class="inhalt"><p>Inhalt 02</p><p>Inhalt 02</p></div>
<div id="x3" class="inhalt"><p>Inhalt 03</p><p>Inhalt 03</p><p>Inhalt 03</p></div>

</div>

CSS

*                               {font:normal 15px/29px consolas, sans-serif}
.radio                          {width:390px; margin:20px 10px}
input.tabs                      {position:absolute; left:-9999px}
input.tabs + label              {display:block; float:left; border:1px solid #333; background:#d4d0c8; padding:0 24px; margin-right:3px; color:#333; position:relative}
input.tabs + label img          {position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer}
input.tabs:checked + label      {background:#fff; color:green}

input#button1:checked ~ div#x1,
input#button2:checked ~ div#x2, 
input#button3:checked ~ div#x3  {display:block}

.inhalt                         {display:none; clear:left; padding:5px 25px; border:1px solid #333; position:relative; top:3px; color:#333}