JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Longer title</th> 
            <th>The longest title</th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td> 
            <td>3</td> 
        </tr>
    </tbody>
  </table>
    
  <table>
    <caption>Another table</caption>
    <thead>
        <tr>
            <th>Title</th>
            <th>Longer title</th> 
            <th>The longest title</th> 
            <th>The longest title ever</th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td> 
            <td>3</td> 
            <td>4</td> 
        </tr>
        <tr>
            <td>1</td>
            <td>2</td> 
            <td>Lorem Ipsum is <br/>simply dummy text <br/>of the printing and typesetting industry.</td> 
            <td>4</td> 
        </tr>
    </tbody>
  </table>

CSS

body {
          background: #EBDCC4;
          margin: 10px;
      }
      table {
          text-align: center;
          border-spacing: 0;
          border-collapse: separate;
          border: 10px solid transparent;
          -o-border-image:...