JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<table class="table table-bordered w-50">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">jeemce</th>
      <td>
        <button data-bs-toggle="collapse" data-bs-target="#list-1">swho</button>
      </td>
    </tr>
  </tbody>

  <tbody class="collapse" id="list-1">
    <tr>
      <th scope="row">user 1</th>
    </tr>
    <tr>
      <th scope="row">user 2</th>
    </tr>
    <tr>
      <th scope="row">user 3</th>
    </tr>
  </tbody>
</table>