JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<!--
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"/>

</head>


<body class="sidebar-mini sidebar-collapse" style="height: auto;">
  <div class="content-wrapper " style="min-height: 598.812px;">
    <div class="content">
      <div class="container-fluid">
       <div class="box">
        <div class="box-body">
          <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
            <div class="row">
              <div class="col-sm-6"></div>
              <div class="col-sm-6"></div>
            </div>
            <div class="resp-table row">
              <div class="center col-sm-8 col-md-10">
                <div id="products_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                  <div class="row">
                    <div class="col-sm-12 col-md-6">
                      <div class="dataTables_length" id="products_table_length"></div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <table style="width: 100%;" id="my_table" class="resp-table table table-bordered table-hover dataTable no-footer" role="grid">
                        <thead>
                          <tr role="row">
                            <th class="sorting_asc" tabindex="0"rowspan="1" colspan="1" aria-label="Nome: activate to sort column descending" aria-sort="ascending" style="width: 62px;">col1</th>
                            <th class="sorting" tabindex="0"rowspan="1" colspan="1" aria-label="E-mail: activate to sort column ascending" style="width: 100px;">col2</th>
                            <th...

CSS

thead, tbody {
  text-align: center;
}
.resp-table {
  display: block;
  width: 100%;
  overflow-x: auto;
}
.center {
  margin-left: auto;
  margin-right: auto;
}

JavaScript

$(document).ready(function() {
	$('#products_table').DataTable();
});