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/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <script type="importmap">
      {
    "imports": {
        "jquery": "https://esm.sh/jquery@3.6.3",
        "datatables.net": "https://cdn.jsdelivr.net/npm/datatables.net@1.13.7/+esm",
        "datatables.net-bs5": "https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.7/+esm",
        "datatables.net-select": "https://cdn.jsdelivr.net/npm/datatables.net-select@1.7.0/+esm",
        "datatables.net-searchpanes-bs5": "https://cdn.jsdelivr.net/npm/datatables.net-searchpanes-bs5@2.2.0/+esm",
        "datatables.net-select-bs5": "https://cdn.jsdelivr.net/npm/datatables.net-select-bs5@1.7.0/+esm"

    }
}
</script>
    <script type="module">
      import $ from 'jquery';

        import bootstrap from 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/+esm'
        import DataTable from 'datatables.net-bs5'
        import 'datatables.net-select-bs5'
        import 'datatables.net-searchpanes-bs5'
        console.log('datatables loaded.');
  var table = new DataTable('#example', {
        searchPanes: {
            layout: 'columns-1'
        },
        dom: '<"dtsp-dataTable"frtip>',
        pageLength: 20
    });
  table.searchPanes()
  $("div.dtsp-verticalPanes").append(table.searchPanes.container());
    </script>
  </head>

  <body>

    <div class="dtsp-verticalContainer">
      <div class="dtsp-verticalPanes">@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>
          <tbody>
            <tr>
              <td>Fred Jones</td>
              <td>System...