JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div class="container p-3">
  <h1>
    Bootstrap 5.3
  </h1>
  <div id="acordionExample">
    <ul>
      <li class="acordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Item 1
        <ul id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
          <li class="acordion-collapse collapse show">Item 1-1</li>
          <li class="acordion-collapse collapse show">Item 1-2</li>
          <li class="acordion-collapse collapse show">Item 1-3</li>
        </ul>
      </li>
      <li>
        Item 2
        <ul>
          <li>Item 2-1</li>
        </ul>
      </li>
      <li>
        Item 3
        <ul>
          <li>Item 3-1</li>
          <li>Item 3-2</li>
          <li>
            Item 3-3
            <ul>
              <li>Item 3-3-1</li>
              <li>Item 3-3-2</li>
              <li>Item 3-3-3</li>
            </ul>
          </li>
          <li>Item 3-4</li>
        </ul>
      </li>
    </ul>
  </div>
</div>