JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="expires" content="-1">

   <title>Test</title>   
	
   <script src="https://code.jquery.com/jquery-3.5.1.js"></script>	
   <link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css"/>   
   <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script> 
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
   <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.22/sorting/datetime-moment.js"></script>

   <link rel="stylesheet" href="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/css/dist/mdb5/standard/core.min.css"> 
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 
   <style> 
     .scs-accbutton   {background-color:#e3dfd1;} 
     .scs-accpastell  {background-color:#f7f7f0;}
	 
   </style>
   
</head>
<body>

<main>
     <!--/ - - - - - - - - - - - - - - - - - - Accordion table-1  -->
                    <div id="accordionperson" class="accordion accordion-flush">
                      <div class="accordion-item mb-3 scs-accpastell ">
                         <h2 class="accordion-header" id="ideen-heading">
                            <button type="button" 
							        class="accordion-button collapsed scs-accbutton"       
                                    data-bs-toggle="collapse"
                                    data-bs-target="#ideen-collapse"
                                    aria-expanded="false"
                                    aria-controls="ideen-collapse">
                               <span>Table-1</span>
			                </button> 
                         </h2>
...

CSS

.scs-accbutton   {background-color:#e3dfd1;} 
     .scs-accpastell  {background-color:#f7f7f0;}

JavaScript

$.extend($.fn.dataTable.defaults, {
        "scrollY":        "930px",
        "scrollX":        true,
		"scrollCollapse": true,
        "pagingType":     "full_numbers",
	    "ordering":       true,
	    "info":           true,
        "fixedColumns": {
            leftColumns: 1
                        },
        "select":         true,
		"responsive":     true,
		"scroller":		  false,
        "language": {
           "emptyTable":   "Keine Daten in der Liste vorhanden",
           "lengthMenu":   "Zeige _MENU_ Einträge per Seite",
           "zeroRecords":  "es sind keine Daten vorhanden",
           "info":         "Auflistung Seite _PAGE_ von _PAGES_",
           "infoEmpty":    "keine Datensätze vorhanden",
           "infoFiltered": "(gefiltert von _MAX_ Gesamteinträgen)",
           "paginate": {
              "first":     "Erste",
              "previous":  "Zurück",
              "next":      "Nächste",
              "last":      "Letzte"				  
                       }, 
               "search":   "Suche:"  
                    },
 										
       });		

       $(document).ready(function () {
          $.fn.dataTable.moment('DD.MM.YYYY');
          $('table.display').dataTable();
          
          $('.collapse').on('shown.bs.collapse', function (e) {
        		$.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
    			});

       });