JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<div id="policies">
<table id="policies-table" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Score</th>
    </tr>
  </thead>
</table>
</div>

<div id="services">
<table id="services-table" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Score</th>
    </tr>
  </thead>
</table>
</div>

CSS

#services{
	margin-top: 15px;
}
#policies, #services{
	border:1px solid black;
}

JavaScript

var json = {
  "Policies": [{
    "name": "A",
    "id": "1",
    "score": "0"
  }],
  "Services": [{
    "name": "B",
    "id": "2",
    "score": "0"
  }]
}

var policyTable = $("#policies-table").DataTable({
 "data" : (json.Policies),
  "columns": [
        { "data": "name" },
        { "data": "id" },
        { "data": "score" }]
});

var serviceTable = $("#services-table").DataTable({
	"data" :(json.Services),
	 "columns": [
        { "data": "name" },
        { "data": "id" },
        { "data": "score" }]
})