JSFiddle - React, Tailwind, and code Playground

HTML

<html>  

        <div style="height: 300px;overflow: auto;">
        <table class="fixed_headers">
        <thead>
        <tr><th><textarea readonly>header 1</textarea></th><th><textarea readonly>header 2</textarea></th><th><textarea readonly>header 3</textarea></th><th><textarea readonly>header 4</textarea></th><th><textarea readonly>header 5</textarea></th></tr>
        </thead>
        <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        </tbody>
        </table>
        </div> 
    </html>

CSS

.fixed_headers {
  
  border-collapse: collapse;
}
.fixed_headers textarea {
  text-decoration: underline;
}
.fixed_headers textarea,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers textarea,
.fixed_headers td {
    min-width: 100px;
}
.fixed_headers thead, textarea {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
 
  position: relative;
}
.fixed_headers tbody {

  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}

textarea {
  border: none;
  min-height: 16px;
  max-height: 16px;
}