JSFiddle - React, Tailwind, and code Playground

by ppgab

HTML

<div class="accordion">
  <input id="colors" type="checkbox">
  <label for="colors">Cores</label>
  <div class="accordion-content">
    I should be hidden tbh
  </div>
</div>
<div class="accordion">
  <input id="framing" type="checkbox">
  <label for="framing">Enquadramento</label>
  <div class="accordion-content">
    I should be hidden tbh
  </div>
</div>
<div class="accordion">
  <input id="font" type="checkbox">
  <label for="font">Fonte</label>
  <div class="accordion-content">
    I should be hidden tbh
  </div>
</div>

CSS

body {
  width: 80%;
}

.accordion {
  width: 100%;
}

.accordion label {
  width: 100%;
  display: flex;
  cursor: pointer;
  margin: 0.5rem;
  align-items: center;
}

.accordion label::after {
  content: "+";
  display: inline-block;
  margin-left: auto;
  margin-right: 2rem;
  transition: all 0.3s ease;
}

.accordion input[type="checkbox"]:checked ~ label::after {
  content: "-";
}

.accordion .accordion-content {
  display: none;
  overflow: hidden;
  margin: .5rem;
  padding: .5rem;
}

.accordion > input[type="checkbox"] {
  display: none;
}

.accordion > input[type="checkbox"]:checked ~ .accordion-content {
  display: block;
  border-left: 1px solid black;
}