JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<div class="block">
  <div class="head">
    <h2>Title</h2>
    <p>description..............</p>
  </div>
  <div class="body">
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>
  </div>
</div>

CSS

.block {
  width: 200px;
  height: 600px;
  background-color: #cf0;
  outline: 1px solid green;
  position: relative;
}


.head {
  width: 200px;
  height: 60px;
  background-color: #0fc;
  z-index: 1000;
  position: absolute;
  top: 0;
}

.body {
  width: 200px;
  z-index: 4;
  background-color: #fc0;
  height: 660px;
  position: absolute;
  top: -60px;
}

tr {
  height: 60px;  
}