JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<input type="radio" class="accordion none" name="accordion" id="none" />

<div class="accordionItem">
  <input type="radio" class="accordion" name="accordion" id="toto" checked />
  <label for="toto" class="accordion">
    <label for="none" class="close">Label 1</label>
    
  </label>
  <div class="content accordion">
    Content 1
  </div>
</div>

<div class="accordionItem">
  <input type="radio" class="accordion" name="accordion" id="toto2" />
  <label for="toto2" class="accordion">
    <label for="none" class="close">Label 2</label>
    
  </label>
  <div class="content accordion">
    Content 2
  </div>
</div>

<div class="accordionItem">
  <input type="radio" class="accordion" name="accordion" id="toto3" />
  <label for="toto3" class="accordion">
    <label for="none" class="close">Label 3</label>
    
  </label>
  <div class="content accordion">
    Content 3
  </div>
</div>

CSS

input.accordion{ position: absolute; opacity: 0; }

label.accordion{ position:relative; display:block; padding: 5px;color:white; background:red; }
label.accordion .close{ display:block ;pointer-events: none; }
input.accordion:checked ~ label.accordion{ background: green; }
input.accordion:checked ~ label.accordion .close{ pointer-events: all; }

div.accordion{ display: none; }
input.accordion:checked ~ div.accordion{ display: block; }