JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Swapi</title>
  

	
</head>
<body>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Height</th>
                <th>hair_color</th>
                <th>skin_color</th>
                <th>gender</th>
        
            </tr>
        </thead>
      
    </table>
</body>
</html>

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
	<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
      
      <script type="text/javascript">
		$(document).ready(function() {
    $('#example').DataTable( {
    ajax: {
        url: 'https://swapi.co/api/people/1/',
        dataSrc: ''
    },
     columns: [
        { data: 'name' },
        { data: 'height' },
        { data: 'hair_Color' },
        { data: 'skin_color' },
        { data: 'gender' }
     
                     ]
              } );
            });
             	</script>