JSFiddle - React, Tailwind, and code Playground

HTML

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
  crossorigin="anonymous"
/>
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
  crossorigin="anonymous"
></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container" id="parent-container">
  <div class="button-container mb-2">
    <button
      class="btn btn-primary"
      data-bs-toggle="collapse"
      data-bs-target="#collapse1"
      aria-expanded="true"
      aria-controls="collapse1"
    >
      Button1
    </button>
    <button
      class="btn btn-secondary"
      data-bs-toggle="collapse"
      data-bs-target="#collapse2"
      aria-expanded="false"
      aria-controls="collapse2"
    >
      Button2
    </button>
    <button
      class="btn btn-warning"
      data-bs-toggle="collapse"
      data-bs-target="#collapse3"
      aria-expanded="false"
      aria-controls="collapse3"
    >
      Button3
    </button>
  </div>
  <div
    class="w-100 bg-primary collapse show"
    id="collapse1"
    data-bs-parent="#parent-container"
  >
    Collapse content 1
  </div>
  <div
    class="w-100 bg-secondary collapse"
    id="collapse2"
    data-bs-parent="#parent-container"
  >
    Collapse content 2
  </div>
  <div
    class="w-100 bg-warning collapse"
    id="collapse3"
    data-bs-parent="#parent-container"
  >
    Collapse content 3
  </div>
</div>