JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.css">
<div class="container">
<table id="example" class="table table-striped table-bordered display nowrap" width="100%">
<thead>
<tr>
<th class="tdStatistikenUeberschrift">Rang</th>
<th class="tdStatistikenUeberschrift">Saison</th>
<th class="tdStatistikenUeberschrift">Spiele</th>
<th class="tdStatistikenUeberschrift">Erzielte Tore</th>
<th class="tdStatistikenUeberschrift">Gegen-<br>tore</th>
<th class="tdStatistikenUeberschrift">Tor-<br>differenz</th>
<th class="tdStatistikenUeberschrift">Tor-<br>summe</th>
</tr>

<tr>
<th data-col="0" class="tdSuche filterhead">Rang</th>
<th data-col="1" class="tdSuche filterhead">Saison</th>
<th data-col="2" class="tdSuche filterhead">Spiele</th>
<th data-col="3" class="tdSuche filterhead">Erzielte Tore</th>
<th data-col="4" class="tdSuche filterhead">Gegen-<br>tore</th>
<th data-col="5" class="tdSuche filterhead">Tor-<br>differenz</th>
<th data-col="6" class="tdSuche filterhead">Tor-<br>summe</th>
</tr>
</thead>

    <tbody>
      <tr>
        <td class="tdStatistikenUeberschrift">1</td>
        <td class="tdStatistiken">1962/63</td>
        <td class="tdStatistiken">28</td>
        <td class="tdStatistiken">64</td>
        <td class="tdStatistiken">21</td>
        <td class="tdStatistiken">43</td>
        <td class="tdStatistiken">85</td>
      </tr>
      <tr>
        <td class="tdStatistikenUeberschrift">2</td>
        <td...

CSS

.statistiken_float {
  float: left;
  width: 220px;
  height: 320px;
  padding: 10px;
  text-align: left;
}

.statistiken_ueberschrift {
  padding: 5px;
  text-indent: 2em;
}

.statistiken_einrueckung {
  padding: 5px 5px 5px 30px;
}


.statistiken_table {
  table-layout: fixed;
  width: 100%;
  border: 0px solid #8A8A8A;
  border-spacing: 2px;
  empty-cells: hide;
  caption-side: bottom;

}

.tdStatistikenErsteSpalte {
  text-align: left;
  font: bold 10pt Tahoma, Verdana, sans-serif;
  height: 0px;
  width: 60%;
  padding: 5px 0px 5px 0px;
  border: 0px solid #8A8A8A;
}

.tdStatistikenUeberschrift {
  text-align: right;
  font-weight: bold;
  height: 0px;
  padding: 5px;
  border: 1px solid #8A8A8A;
}

.tdStatistiken {
  text-align: right;
  font: normal 10pt Tahoma, Verdana, sans-serif;
  padding: 5px;
  border: 1px solid #8A8A8A;
}

.tdStatistikenUnterschrift {
  text-align: center;
  height: 0px;
}

.bold {
  font-weight: bold;
}

JavaScript

$(document).ready(function () {
$('#example thead tr:eq(1) th').each(function() {
    var title = $(this).text();
    $(this).html('<input type="text" style="width:100%;" placeholder="Suche" class="column_search" />');
  });

$('#example thead').on('keyup', ".column_search", function() {
    table
      .column($(this).parent().index() + ':visible')
      .search(this.value)
      .draw();
  });

   var table = $('#example').DataTable( {

   orderCellsTop: true,

   dom: 'Bfrtip',

   lengthMenu: [ [ -1, 10], ["Alle", 10] ],
   
   //fixedHeader: true,
   
// responsive: true,   
   
   buttons: [{extend: 'pageLength', text: 'Anzahl Zeilen' },
             {extend: 'colvis', text: 'Spalten ein/ausblenden'}
             ],
             
      scrollX: true,             
             
   columnDefs: [
          {
            targets: [5,6],
            visible: false
          }
        ],             


        language: {
        processing: "Bitte warten...",
        loadingRecords: "Wird geladen...",
        search: "Suchen",
        info: "_START_ bis _END_ von _TOTAL_ Eintr&auml;gen",
        infoEmpty: "Keine Daten",
        lengthMenu : '<select>'+
                     '<option value="10">10</option>'+
                     '<option value="-1">Alle</option>'+
                     '</select> Eintr&auml;ge',
        infoFiltered: "(gefiltert von _MAX_ Eintr&auml;gen)" ,
        infoPostFix: "",
        zeroRecords: "Keine Eintr&auml;ge",
        paginate: {
            first:      "Erste",
            previous:   "Zur&uuml;ck",
            next:       "N&auml;chste",
            last:       "Letzte"
           }
        }
    }
);



  

  



  // When a column becomes visible add the input in case it was initially hidden by stateSave
  $('#example').on( 'column-visibility.dt', function ( e, settings, column, state ) {

    // Column changed to visible
    if ( state ) {

      // Get the second row TH
      var rowTwoTH = $(table.column( column...