JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<div style="height:50%; background: #f5f5f5" class="display-flex overflow-auto">
  <div style="width: 50%" class="child child-1">
    <table>
      <tr>
        <th>
          <div>First Name</div>
        </th>
        <th>
          <div>Last name</div>
        </th>
        <th>
          <div>State</div>
        </th>
        <th>
          <div>City</div>
        </th>
        <th>
          <div>country</div>
        </th>
        <th>
          <div>Age</div>
        </th>
        <th>
          <div>Date of Birth</div>
        </th>
        <th>
          <div>Mothers Name</div>
        </th>
        <th>
          <div>Fathers Name</div>
        </th>
        <th>
          <div>No. Of Siblings</div>
        </th>
      </tr>
      
      <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
          <div>Smith</div>
        </td>
        <td>
          <div>Goa</div>
        </td>
        <td>
          <div>Ponda</div>
        </td>
        <td>
          <div>India</div>
        </td>
        <td>
          <div>29</div>
        </td>
        <td>
          <div>23/09/1991</div>
        </td>
        <td>
          <div>Jane Smith</div>
        </td>
        <td>
          <div>Jade Smith</div>
        </td>
        <td>
          <div>3</div>
        </td>
      </tr>
        <tr>
        <td>
          <div>David</div>
        </td>
        <td>
         ...

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

table,
th,
td {
  border: 1px solid black;
}

.overflow-auto {
  overflow-x: auto;
  overflow-y: unset;
}

.display-flex {
  display: flex
}

td,
th {
  white-space: nowrap
}

th {
  font-weight: bold;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
}