JSFiddle - React, Tailwind, and code Playground

HTML

<html style="font-size: 13px;">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Project</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" type="text/css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">


</head>

<body>

<div class="container-fluid" style="margin-top:65px">
   <div class="card text-center">
      <div class="card-heading">
         <div class="card-title bg-light">
            <h3 align="center">Elenco </h3>
         </div>
         <div class="card-body">
            <table id="datatable" class="display responsive no-wrap table table-striped table-bordered " cellspacing="0" 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>
        <thead>
            <tr id="forFilters">
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>        
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical...

CSS

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dropdown-container, .instructions {
    width: 200px;
    height: 200px;
}

.instructions {
    width: 100%;
    text-align: center;
};

.dropdown-button {
    float: left;
    width: 100%;
    background: red;
    padding: 10px 12px;
    cursor: pointer;
    box-sizing: border-box;
}

.dropdown-label, .dropdown-quantity {
      float: left;
    };

.dropdown-quantity {
      float: left;
      margin-left: 4px;
};

.fa-filter {
      float: right;
    };

.dropdown-list {
    width: 100%;
    border: 1px solid lightgray;
    border-top: none;
    box-sizing: border-box;
    padding: 10px 12px;
    background: whitesmoke;
};

.dropdown-list ul {
        background: red;
        overflow-y: scroll;
        text-align: left;
        margin: 0;
        padding-top: 5px;
        max-height: 200px;
        list-style-type: none;
        padding-inline-start: 10px;

input[type="checkbox"] {
            position: left;
            top: 50px;
        }
}

JavaScript

$(document).ready(function(){
/*APERTURA DOCUMENTO CONFIGRAZIONE TABELLA*/
 var table = $('#datatable').DataTable({
    /*APERTURA DOCUMENTO CONFIGRAZIONE FILTRI*/
        "scrollY":        "160px",
        "scrollCollapse": true,
        "paging":         false,
        "responsive":true,
    /* PULSANTI TABELLA E IMPOSTAZIONI TABELLA*/
         dom: 'Bfrtip',         
         /* CARICAMENTO DATI */         
         "footerCallback": function ( row, data, start, end, display ) {
              var api = this.api(),data;
              var intVal = function ( i ) {
                  return typeof i === 'string' ?
                      i.replace(/[\$,]/g, '')*1 :
                      typeof i === 'number' ?
                          i : 0;
              };
              var Totalage = api
                       .column(3,{search: 'applied'})
                       .data()
                       .reduce( function (a, b) {
                           return intVal(a) + intVal(b);
                       }, 0 );
             
              // SCRIVO I TOTALI            ;
        	    $( api.column( 0 ).footer() ).html('Totali');
                    $( api.column(3).footer()).html(Totalage.toFixed(0));
                    
                },

         "initComplete": function () {
           count = 0;
           this.api().columns([0,1,2]).every( function () {
             console.log(this);
                 var title = this.header();
                 title = $(title).html().replace(/[\W]/g, '-');
                 var column = this;
                 var select = $('<div class="dropdown-container"><div class="dropdown-button noselect"><div class="dropdown-label">'+title+'</div><div class="dropdown-quantity">(<span class="quantity">Tutti</span>)</div><i class="fa fa-filter"></i></div><div class="dropdown-list" style="display: none;"><input type="search" placeholder="Cerca "'+title+' class="dropdown-search"/><ul class="nobull" id="'+title+'"></ul></div>')
               ...