JSFiddle - React, Tailwind, and code Playground

HTML

<table class = "my_table" rules="rows" frame="box">
      <tr class = "headings grey_row">
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
      </tr>
      <tr class = "white_row">
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
      </tr>
      <tr class = "grey_row">
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
      </tr>
      <tr class = "white_row">
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
        <td>abcde</td>
      </tr>
      <tr class = "grey_row">
        <td>abcde</td>
        <td colspan = "4" class = "headings">
          You can also put some text in here that should span about 4 of the columns. That is what I'm trying to do right now! I think it will go at least two lines here.
        </td>
      </tr>
    </table>

CSS

.my_table {
  border: 1px solid $grey;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
    display: block;
    width: 90%;
}

.headings {
  font-size: 11px;
  color: $grey;
}

.grey_row {
  background-color: #E3E3E3;
  height: 38px;
}

.white_row {
  background-color: white;
  height: 38px;
}