JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td>Nome:</td><td>Roberto Afonso</td>
  </tr>
  <tr>
    <td>Email:</td><td>[email protected]</td>
  </tr>
</table>

CSS

.tabelaEditavel {
    border:solid 1px;
    width:100%
}

.tabelaEditavel td {
    border:solid 1px;
}

.tabelaEditavel .celulaEmEdicao {
    padding: 0;
}

.celulaEmEdicao .icon{
  cursor: pointer;
}

JavaScript

$("td").dblclick(function(){
      var originalContent = $(this).text();

      $(this).addClass("celulaEmEdicao");
      $(this).html("<input type='text' class='teste ui input focus' value='" + originalContent + "' /><i class='checkmark green icon'></i><i class='remove red icon'></i>");
      $(this).children().first().focus();

      // if you press ENTER
      $(this).children().first().keypress(function (e) {
        if (e.which == 13) {
          var newContent = $(this).val();
          $(this).parent().text(newContent);
          $(this).parent().removeClass("celulaEmEdicao");
        }
      });

      $(".checkmark.green.icon").click(function(){
        $(this).parent().text(originalContent);
    		$(this).parent().removeClass("celulaEmEdicao");
      })

      $(".remove.red.icon").click(function(){
        $(this).parent().text(originalContent);
    		$(this).parent().removeClass("celulaEmEdicao");
      })
    })