JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div>
  <table cellspacing = 0>
    <tr>
      <th>Effort</th>
      <th>Value</th>
      <th>Unit</th>
      <th>Comment</th>
    </tr>
    <tr>
      <td class="italic">Committed at DR1</td>
      <td><input type='text'/></td>
      <td>
        <select>
          <option>€</option>
          <option>$</option>
        </select>
      </td>
      <td><textarea maxlength=2></textarea></td>
    </tr>
    <tr>
      <td class="italic">Realized at TR</td>
      <td><input type='text'/></td>
      <td>
         <select>
          <option>€</option>
          <option>$</option>
        </select>
      </td>
      <td><textarea></textarea></td>
    </tr>
  </table>
</div>
<div>
  <table cellspacing = 0>
    <tr>
      <th>CAPEX/OPEX</th>
      <th>Value</th>
      <th>Unit</th>
      <th>Comment</th>
    </tr>
    <tr>
      <td class="italic">Committed at DR1</td>
      <td><input type='text'/></td>
      <td>
         <select>
          <option>€</option>
          <option>$</option>
        </select>
      </td>
      <td><textarea></textarea></td>
    </tr>
    <tr>
      <td class="italic">Realized at TR</td>
      <td><input type='text'/></td>
      <td>
         <select>
          <option>€</option>
          <option>$</option>
        </select>
      </td>
      <td><textarea></textarea></td>
    </tr>
  </table>
</div>

CSS

td {
  /* border-bottom: 1px black solid; */
  padding-top: 10px;
  padding-bottom: 10px;
}

div {
  margin-bottom: 50px;
}

td {
}

.italic {
  font-style: italic;
  padding-right: 10px;
}

textarea {
  height: 30px;
}

th {
  background-color: #BDDFF9;
}

tr {
  background-color: #F2F2F2;
  border-top: 1px solid #c3c3c3;
}