JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<table>
  <colgroup><col id="col1"><col id="col2"><col id="col3"></colgroup>
<tr>
   <td><textarea>tralala</textarea></td>
   <td><textarea>Ein Ring, sie zu knechten</textarea></td>
   <td><textarea>My preccciouss!</textarea></td>
</tr>
<tr>
   <td colspan="2"><textarea></textarea></td>
   <td><textarea>foo di boo</textarea></td>
</tr>
<tr>
   <td><textarea></textarea></td>
   <td colspan="2"><textarea></textarea></td>
</tr>
</table>

CSS

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  padding-top: 2px; height: 3em; 
  border: 1px solid green;
  background-color: #8f8;
}
#col1 { width: 10em; }
#col2 { width: 25em; }
#col3 { width: 15em; }

td textarea { 
  background-color: #ffc; box-sizing: border-box;
  margin: 0; padding: 0;
  width: 100%; height: 100%;resize: none; border:none;

}
td textarea:hover { background-color: #ccf; }
td textarea:focus { background-color: #fcc; }

JavaScript

/*

*/