JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card shadow rounded">
    <div class="card-content one-third">
        <div class="list-title">Owner Details</div>
        <ul class="detail-list">
            <li class="button rounded"><a class="list-heading">Mr:</a> <a class="list-result-edit" contenteditable="true"></a></li>
            <li class="button rounded"><a class="list-heading">Mrs:</a> <a class="list-result-edit" contenteditable="true"></a></li>
            <li class="button rounded"><a class="list-heading">Email:</a> <a class="list-result-edit" contenteditable="true"></a></li>
            <li class="button rounded"><a class="list-heading">Mobile No:</a> <a class="list-result-edit" contenteditable="true"></a></li>
            <li class="button rounded"><a class="list-heading">Phone No:</a> <a class="list-result-edit" contenteditable="true"></a></li>
            <li class="button rounded"><a class="list-heading">Address:</a> <a class="list-result-edit" contenteditable="true"></a></li>
        </ul>
    </div>
</div>

CSS

.rounded 						{ border-radius: 3px; }
.shadow 						{ box-shadow: 0 2px 2px #c1c1c1; }
.card 							{ max-width:1600px; min-width:1000px; background-color: white; padding: 15px 15px 30px 15px; min-height: 100px; margin:0 auto 30px auto; overflow:hidden; }
.one-third 						{ width: 33.3%; float: left; }
.list-title 					{ font-size: 12pt; font-weight: 300; font-style: italic; margin: 20px auto -10px auto; width:95%; border-bottom: 1px solid #ededed; padding: 0 0 6px 0; color: #00838f;}
.list-title a                   { color: #999999; font-size: 9pt; float: right; line-height: 24px}
.list-heading           		{ width: 110px; text-align: right; display: inline-block; font-weight: 500; color: #747474; margin-right: 5px; float: left; }
.list-result-edit 				{ display: table-cell; }
.button:hover 					{ cursor: pointer; background-color: #f7f7f7; border-radius: 3px }
.detail-list                	{ list-style: none; margin: 0; padding: 20px 20px 0 20px; display: block; font-size: 10pt; }
.detail-list li             	{ width: 100%; padding: 2px; color: #999999;  font-style: italic; }
.edit 							{ background-color: #d0f8ce; cursor: pointer; } 		
[contenteditable="true"]:active { border:none; outline:none; }
[contenteditable="true"]:focus  { border:none; outline:none; }

JavaScript

$(".list-result-edit").keypress(function(e) {
    if(e.which == 13) {
        e.preventDefault();
    }
});

	/*-- Adds and removes class to change background colour on edit of DIV --*/
	$(".list-result-edit").focusout(function() {
		$(".detail-list li.edit").removeClass('edit');
		$(".detail-list li").addClass('button');
	});
	
	/*-- Adds and removes class to make above DIV consistant once active --*/
	$( ".list-result-edit" ).focus(function() {
		$(".detail-list li").addClass('button');
		$(this).closest(".detail-list li").removeClass("button");
		$(".detail-list li.edit").removeClass('edit');
		$(this).closest(".detail-list li").addClass('edit');
	});