JSFiddle - React, Tailwind, and code Playground

by tchalvakspam

HTML

<p>This is an example that does have the default show.</p>

<div class="tab_container">

  <ul class="tabs">
    <li><a href="#updates-list">List</a></li>
    <li><a href="#updates-map">Map</a></li>
  </ul>

  <ul class="tab list" id="updates-list">
    Eh.. Hello!
  </ul>
  <div class="tab map" id="updates-map">Map stuff</div>
</div>

CSS

/* Sibling selector */
.tab, .tab:target ~ #updates-list  {
  display: none;
}
.tab:target ~ #updates-map {
    display:none;
}
#updates-list, .tab:target {
  display: block;
}