JSFiddle - React, Tailwind, and code Playground

by tacman1123

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Welcome!</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <script type="module">

      import bootstrap from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
      import "https://code.jquery.com/jquery-3.7.0.js";
      import DataTables from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
      import "https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js";
      import "https://cdn.datatables.net/searchpanes/2.2.0/js/dataTables.searchPanes.min.js";
      import "https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js";
      let el=document.getElementById('example');
      let table = new DataTables(el, {
        searchPanes: {
          layout: 'columns-1'
        },
        dom: '<"dtsp-dataTable"frtip>',
        pageLength: 10
      });
      table.searchPanes();
      document.querySelector("div.dtsp-verticalPanes").appendChild(
        table.searchPanes.container()
      );

    </script>
  </head>

  <body>
    <div class="dtsp-verticalContainer">
      <div class="dtsp-verticalPanes"></div>
      <div class="container">
        <table id="example" class="display nowrap" width="100%">
          <thead>
            <tr>
              <th>Name</th>
              <th>Position</th>
              <th>Office</th>
              <th>Age</th>
              <th>Start date</th>
              <th>Salary</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th>Name</th>
              <th>Position</th>
              <th>Office</th>
              <th>Age</th>
              <th>Start date</th>
              <th>Salary</th>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
              <td>Edinburgh</td>
              <td>61</td>
             ...