JSFiddle - React, Tailwind, and code Playground

by Katarn

HTML

<button class="container">
 <div class="header">
   Owo
 </div>
 <div class="content">
   Uwu
 </div>
</button>

<button class="container">
 <div class="header">
   Owo
 </div>
 <div class="content">
   Uwu
 </div>
</button>

<button class="container">
 <div class="header">
   Owo
 </div>
 <div class="content">
   Uwu
 </div>
</button>

<button class="container">
 <div class="header">
   Owo
 </div>
 <div class="content">
   Uwu
 </div>
</button>

<button class="container">
 <div class="header">
   Owo
 </div>
 <div class="content">
   Uwu
 </div>
</button>

CSS

.container {
  display: block;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.content {
  display: none;
}

.header {
  display: block;
  background: yellow;
}

.container:focus .content {
  display: block;
  background: red;
}