JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#forwarded" aria-expanded="true">Forwarded Requests</a></li>
                        <li><a data-toggle="tab" href="#received" aria-expanded="false">Recieved requests</a></li>
                    </ul>
                    <div class="tab-content">
                            <div id="forwarded" class="tab-pane active">
                                <div id="hide-table">
                                    <table id="forwarded_requests" class="table table-striped table-bordered table-hover dataTable no-footer">
                                        <thead>
                                            <tr>
                                                <th class="col-sm-1">slno</th>
                                                <th class="col-sm-2">reason</th>
                                                <th class="col-sm-2">exam</th>
                                                <th class="col-sm-1">student</th>
                                                <th class="col-sm-1">class</th>
                                                <th class="col-sm-2">forwarded to</th>
                                                <th class="col-sm-1">status</th>
                                                
                                                <th class="col-sm-2">action</th>
                                              
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                              <td>1</td>
                                              <td>reason</td>
                                              <td>exam</td>
                                              <td>student</td>
                                             ...

JavaScript

$(document).ready(function() {
          $('#forwarded_requests,#received_requests').DataTable( {
              dom: 'Bfrtip',
              buttons: [
                  'copyHtml5',
                  'excelHtml5',
                  'csvHtml5',
                  'pdfHtml5'
              ],
              search: false,
              "aoColumnDefs": [
    { 'bSortable': false, 'aTargets': ['no-sort'] }
                  ]
          } );
         
        } );