JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<table class="views-table views-view-table cols-7 responsive-enabled sticky-enabled">
      <caption>
          This is the user content
              <details class="js-form-wrapper form-wrapper seven-details" open="">    <summary role="button" aria-expanded="true" aria-pressed="true" class="seven-details__summary">
      <span>List of content</span>
    </summary><div class="seven-details__wrapper details-wrapper">
    5 sortable columns allowing authors to view by content type or order.</div>
</details>

        </caption>
        <thead>
      <tr>
                                                  <th class="select-all views-field views-field-node-bulk-form" scope="col"><input type="checkbox" class="form-checkbox" title="Select all rows in this table"></th>
                                                  <th id="view-title-table-column" class="views-field views-field-title" scope="col"><a href="?title=&amp;type=All&amp;status=All&amp;langcode=All&amp;order=title&amp;sort=asc" title="sort by Title" rel="nofollow">Title</a></th>
                                                  <th id="view-type-table-column" class="views-field views-field-type" scope="col"><a href="?title=&amp;type=All&amp;status=All&amp;langcode=All&amp;order=type&amp;sort=asc" title="sort by Content type" rel="nofollow">Content type</a></th>
                                                  <th class="priority-low views-field views-field-name" id="view-name-table-column" scope="col">Author</th>
                                                  <th id="view-status-table-column" class="views-field views-field-status" scope="col"><a href="?title=&amp;type=All&amp;status=All&amp;langcode=All&amp;order=status&amp;sort=asc" title="sort by Status" rel="nofollow">Status</a></th>
                                                  <th class="priority-low views-field views-field-changed is-active" id="view-changed-table-column" scope="col"><a...