JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div>
  <table cellspacing=0>
    <tr>
      <th class='right_border'>Effort</th>
      <th class='right_border'>Value</th>
      <th class='right_border'>Unit</th>
      <th class='right_border'>Comment</th>
    </tr>
    <tr>
      <td class="italic right_border bottom_border">Committed at DR1</td>
      <td class="right_border bottom_border"><input readonly type='text' class="hide_inputs_textareas"/></td>
      <td class="right_border bottom_border" align='center'>
        <select disabled class="hide_select">
          <option>€</option>
          <option selected>$</option>
        </select>
      </td>
      <td class='bottom_border'><textarea readonly class="hide_inputs_textareas"></textarea></td>
    </tr>
    <tr>
      <td class="italic right_border">Realized at TR</td>
      <td class="right_border"><input readonly type='text' class="hide_inputs_textareas"/></td>
      <td class="right_border" align='center'>
        <select disabled class="hide_select">
          <option>€</option>
          <option>$</option>
        </select>
      </td>
      <td><textarea readonly class="hide_inputs_textareas"></textarea></td>
    </tr>
  </table>
</div>
<div>
  <table cellspacing=0>
    <tr>
      <th class='right_border'>CAPEX/OPEX</th>
      <th class='right_border'>Value</th>
      <th class='right_border'>Unit</th>
      <th class='right_border'>Comment</th>
    </tr>
    <tr>
      <td class="italic right_border bottom_border">Committed at DR1</td>
      <td class="right_border bottom_border"><input readonly type='text' class="hide_inputs_textareas"/></td>
      <td align='center' class="right_border bottom_border">
        <select disabled class="hide_select">
          <option>€</option>
          <option>$</option>
        </select>
      </td>
      <td class="bottom_border"><textarea readonly class="hide_inputs_textareas"></textarea></td>
    </tr>
    <tr>
      <td class="italic right_border bottom_border">Realized at TR</td>
      <td...

CSS

td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.hide_inputs_textareas {
  text-align: center;
  background-color: transparent;
  border: 0;
}

div {
  margin-bottom: 50px;
}

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

.right_border {
  border-right: 1px solid #c3c3c3; 
}

.bottom_border {
  border-bottom: 1px solid #c3c3c3; 
}

textarea {
  height: 30px;
  overflow-y: scroll;
  resize: none;
}

th {
  padding-left: 10px;
  padding-right: 10px;
  background-color: #BDDFF9;
  height: 40px;
}

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

.hide_select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  background-color: transparent;
  border: 0;
}

JavaScript

$(function() {
  $('button').on('click', function() {
    edit();
  });
});


function edit() {
  $('select').removeClass('hide_select');
  $('select').removeAttr('disabled');
  $('input, textarea').removeAttr('readonly');
  $('input,textarea').removeClass('hide_inputs_textareas');
}