JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" width="100%" height="100%" align="center" cellpadding="0" cellspacing="0">
<tr height=10>
   <td colspan=3><div align="center" class="fdgris">Photo</div></td>
</tr>
 <tr>
   <td width="7%" align="center" valign="middle">
     <img src="images/prev_off.gif" onmouseover="this.src='images/prev_on.gif';" onmouseout="this.src='images/prev_off.gif';" width="100%" border="0">
   </td>
   <td align="center" valign="middle">
      <img class="mon-image" src="https://placehold.it/600x900" height="100%" border="0">
   </td>
   <td width="7%" align="center" valign="middle"  >
     <img src="images/next_off.gif"  onmouseover="this.src='images/next_on.gif';" onmouseout="this.src='images/next_off.gif';"   width="100%" border="0">
   </td>
</tr>
</table>

CSS

.mon-image {
  max-height: 90vh;
}