JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>My Data for Time Period</title>
 
  </head>
  <body>
      
    <div class="parent">
    <table>
    <tr><td>
    <div id="foo"></div>
    <!--- <div id="capture"></div> -->
    </td></tr>
    <tr><td>
    <div>
  
    
    <form action='/get_trip_input/' method="get">
<input type='hidden' name='csrfmiddlewaretoken' value='' />
    <input type="submit" value="Back to Input" class="back">
    </form>
    </div>
    </td></tr>
    <tr><td>
    <h3>Trip Points</h3>
    
    <table id="trip_table">
    <thead class="datatable">
    <th class="datatable">Description</th>
    <th class="datatable">Date/Time</th>
    </thead>
    <tbody class="datatable">
      
    <tr class="datatable">
    <td class="datatable">Start
    <td class="datatable">06/29/19 02:00 </td>
</tr>
    
    <tr class="datatable">
    <td class="datatable">End </td>
    <td class="datatable">06/29/19 19:00 </td>
</tr>
    

    </tbody>
    </table>
    
    </td></tr>
    <tr><td>
    <h3>Data for time period </h3>
    <table id="result_table">
    <thead class="datatable">
    <th class="datatable">Number</th>
    <th class="datatable">Letter</th>
    <th class="datatable">Date/Time</th>
    <th class="datatable">Data</th>
    <th class="datatable">Pin</th>
    </thead>
    <tbody>
    
    <tr class="datatable">
    <td class="datatable">35</td>
    <td class="datatable">35 </td>
    <td class="datatable">06/29/19, 02:00 </td>
    <td class="datatable">2 </td>
    <td class="datatable">

<img src='http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png' class='pin'></img>

</td>
</tr>
    
    <tr class="datatable">
    <td class="datatable">35 </td>
    <td class="datatable">35 </td>
    <td class="datatable">06/29/19, 03:00 </td>
    <td class="datatable">3</td>
    <td class="datatable">

<img src='http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png'...

CSS

html, body {
        padding: 0;
        margin: 0;
        }
      #foo {
       height: 420px;
       width: 630px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       margin: 10;
       }

       #result_table {
       width:630px;
       height:130px;
       float: left;
       border: thin solid #333;
      
       }
       thead.datatable{
       width:630px;
      
       }

       tbody.datatable{
       width:630px;
       height:100px;
       overflow-y: auto;
       }
       th.datatable, td.datatable {
       border: thin solid #333;
       }
       tr.datatable, thead.datatable {
       border: thin solid #333;
       height: 30px;
        }
       .pin {
       height: 30px;
        }
       .parent {
       border: 10;
       display: inline-block;
       
       }
       .back {
       float: right;
       margin: 10;
       }
        .new{
     float:left;
     }
        .divtable{
      height:200px;
      position:absolute;
       }