JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<div class="main-wrapper">
  <div class="sidebar">
  </div>
  <div class="main-content">
    <div class="table-wrapper">
      <table>
        <tr>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
          <th>Title Heading</th>
        </tr>
        <tr>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
        </tr>
        <tr>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content text</td>
          <td>Table content...

CSS

* {
  margin: 0px;
  padding: 0px;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
}

.main-wrapper {
  display: flex;
}

.sidebar {
  width: 300px;
  height: 175px;
  display: block;
  min-width: 300px;
  background-color: #eeeeee;
  margin-right: 15px;
}

.table-wrapper {
  overflow: auto;
  max-width: 100%;
}

.main-content {
  width: calc(100% - 300px);
}