JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td>hi there</td>
     <td>my friends</td>
      <td>how are you</td>
  </tr>
    <tr>
    <td>hi there</td>
     <td id="td"><svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  Sorry, your browser does not support inline SVG.  
</svg></td>
      <td>how are you</td>
  </tr>
  <tr>
    <td>hi there</td>
     <td>my friends</td>
      <td>how are you</td>
  </tr>
</table>

CSS

td {
  border: 1px solid grey;
}

#td {
  position: relative;
  width: 50px;
  height: 50px;
}

#td svg {
  width: 100%;
  height: auto;
}