JSFiddle - React, Tailwind, and code Playground

by Donna Torr

HTML

<table class="table-container">
    <tbody>
      <tr>
        <td rowspan="1" colspan="2">Pipe Size</td>
        <td>38mm</td>
        <td>51mm</td>
        <td>64mm</td>
        <td>76mm</td>
        <td>89mm</td>
        <td>102mm</td>
      </tr>
      <tr>
        <td>Metric</td>
        <td>Imperial</td>
        <td>1 1/2"</td>
        <td>2"</td>
        <td>2 1/2"</td>
        <td>3" </td>
        <td>3 1/2"</td>
        <td>4"</td>
      </tr>
      <tr>
        <td>356</td>
        <td>14"</td>
        <td>555.40</td>
        <td>568.83</td>
        <td>598.02</td>
        <td>615.82</td>
        <td>633.43</td>
        <td>651.25</td>
      </tr>
      <tr>
        <td>381</td>
        <td>15</td>
        <td>568.83</td>
        <td>598.02</td>
        <td>615.82</td>
        <td>633.43</td>
        <td>651.25</td>
        <td>668.90</td>
      </tr>
      <tr>
        <td>406</td>
        <td>16</td>
        <td>598.02</td>
        <td>615.82</td>
        <td>633.43</td>
        <td>651.21</td>
        <td>668.90</td>
        <td>686.62</td>
      </tr>
      <tr>
        <td>432</td>
        <td>17</td>
        <td>615.82</td>
        <td>633.43</td>
        <td>651.21</td>
        <td>668.90</td>
        <td>686.62</td>
        <td>704.33</td>
      </tr>
      <tr>
        <td>457</td>
        <td>18</td>
        <td>633.43</td>
        <td>651.21</td>
        <td>668.90</td>
        <td>686.62</td>
        <td>704.33</td>
        <td>721.95</td>
      </tr>
      <tr>
        <td>483</td>
        <td>19</td>
        <td>651.21</td>
        <td>668.90</td>
        <td>686.62</td>
        <td>704.33</td>
        <td>721.95</td>
        <td>739.80</td>
      </tr>
      <tr>
        <td>508</td>
        <td>20</td>
        <td>668.90</td>
        <td>686.62</td>
        <td>704.33</td>
        <td>721.95</td>
        <td>739.80</td>
        <td>757.50</td>
      </tr>
    </tbody>
  </table>