JSFiddle - React, Tailwind, and code Playground

by latika12

HTML

<label class="showMore" for="_1">Heading 1</label>
  <input id="_1" type="checkbox">
  <div>Hidden 1</div>
  
  <label class="showMore" for="_2">Heading 2</label>
  <input id="_2" type="checkbox">
  <div>Hidden2</div>

CSS

.showMore{
  font-size: 14px;
  opacity: 1;
  text-decoration: underline;  
  cursor: pointer;
  transition: .3s all ease;
  
}
.showMore + input{
   opacity: 0;
  transition: .3s all ease;
}
.showMore + input + *{
   opacity: 1;
  transition: .3s all ease;
}
.showMore + input:checked + *{
   opacity: 0;
  transition: .3s all ease;
    
}