JSFiddle - React, Tailwind, and code Playground

by Kevin Bratt

HTML

<table>
  <tbody>
    <tr>
      <td>
        <div>fred</div>
      </td>
      <td>
        <div><span>bert</span></div>
      </td>
      <td>
        <div><span>bert</span></div>
      </td>
    </tr>
    <tr>
      <td>
        <div><span>bert</span></div>
      </td>
      <td>
        <div><span>bert</span></div>
      </td>
      <td>
        <div><span>bert</span></div>
      </td>
    </tr>
    <tr>
      <td>
        <div>bert</div>
      </td>
      <td>
        <div><span>bert</span></div>
      </td>
      <td>
        <div><span>bert</span></div>
      </td>
    </tr>
  </tbody>
</table>

CSS

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

span {}

div {
  animation: venetian 5s infinite;
  overflow: hidden;
}

@keyframes venetian {
  from {
    line-height: 45px;
    height: 45px;
  }
  50% {
    line-height: 0px;
    height: 0px;
  }
  to {
    line-height: 45px;
    height: 45px;
  }
}

JavaScript

windows.onload();