JSFiddle - React, Tailwind, and code Playground

by Farzad YZ

HTML

<details>
  <summary>title 1</summary>
  <p>
    content 1
  </p>
</details>

CSS

details>summary {
  cursor: pointer;
}


details>p {
  max-height: 0;
  transition: 0.2s ease-in-out;
  overflow: hidden;
  visibility: hidde;
  animation: show 0.2s ease-in-out forwards;
}

@keyframes show {
  to {
    max-height: 1000px;
    visibility: visible;
  }
}