JSFiddle - React, Tailwind, and code Playground

by ecropolis

HTML

<script src="https://cloudwise.ly.s3.amazonaws.com/jslibs/lockr.js"></script>
<section id="external-contacts">
    <header>
        <h1>External Contacts</h1>
        <p>Select the client contacts associated with this offer</p>
    </header>
    
    <div id="address-book"></div>
</section>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
body {
    font-family: 'Roboto',helvetica,arial, sans-serif;
    background-color:#FFF;
    font-size: 12px;
    line-height: 1em;
    color: #828282;
  }
section { margin: 50px; }
#address-book{
    margin: 15px auto;
}

section header {
  padding: 10px;
}
header h1{ color: #4ba9df; margin: 0 0 15px 0; font-size: 20px; }
.quickgrid {
  border-collapse: separate;
  border-spacing: 0;
  border:none;
  max-width:812px;
}
header p { color: #9fa0a2; margin: 0 0 15px 0; }

.quickgrid tr td {
    padding: 12px 21px;
}
.quickgrid tr th {
  color: #4ba9df;
  font-weight: 400;
  border-top: 1px solid #E3E3E3;
  padding: 20px 21px;
}
.quickgrid tr {
  transition:.5s;
}

/* table borders */
/* Outter borders */
.quickgrid tr:first-child > th {
    border-top: 1px solid #C8C8C8;
    border-bottom: 1px solid #e3e3e3;
}
.quickgrid tr td:first-child,
.quickgrid tr th:first-child{
    border-left: 1px solid #C8C8C8;
    border-right: 1px solid #e3e3e3;
    padding: 10px 12px;
}
.quickgrid tr td:last-child,
.quickgrid tr th:last-child{
    border-right: 1px solid #C8C8C8;
}
.quickgrid tr:last-child > td {
    border-bottom: 1px solid #C8C8C8;
}

.quickgrid tr {
  transition:.5s;
  cursor:pointer;
}

.quickgrid tr:nth-child(odd) {
  background-color: #fff;
}
.quickgrid tr:nth-child(even) {
  background-color: #f6f6f6;
}
.quickgrid tbody tr:hover {
  background-color: rgba(75, 169, 223, 0.15);
}

/* round corders */
.quickgrid thead tr:first-child > th:first-child {
  border-radius: 5px 0 0 0;
  position:relative;
}
.quickgrid thead tr:first-child th:last-child {
  border-radius: 0 5px 0 0;
  position:relative;
}
.quickgrid tbody tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}
.quickgrid tbody tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}
.quickgrid td label.cb > input { display:none; }
.quickgrid td label.cb,
.quickgrid td .submit-row { border: 1px solid #C8C8C8; display:inline-block;...

JavaScript

(function($){
    $.fn.quickgrid = function(options,param){
    	var $t = this;
      if(!options.selectRow)
        options.selectRow = function(e){
          e.stopPropagation();
          e.preventDefault();
          console.log($(this))
          $cb = $(this).toggleClass('selected');
          $cb.find('input').prop('checked',($cb.hasClass('selected')?true:false));
          _delbtn_ui();
        }
        $t._delete = function(){
        		$t.find('tr').each(function(){
            		if($(this).find('.cb input').is(':checked'))
                		$(this).addClass('delete-mark').delay(600).remove();
            });
            $(this).removeClass('active');
        }
        var _delbtn_ui = function(){
        	if($t.find('.del-rec').length){
          		$del = $t.find('.del-rec');
          } else {
          		$del = $('<button class="del-rec"> - </button>').on('click',$t._delete);
          		$t.find('tr th:first-child').append($del);
          }
          if( $t.find('.cb input').is(':checked') )
          		$del.addClass('active');
          else
          		$del.removeClass('active');
        }
        $t._add = function(e){
        		if(!$(this).hasClass('active')){
            	$(this).addClass('active');
        		  $t.rowform = $('<tr class="row-input"/>');
              $t.rowform.keypress(function(e) {
                  if(e.which == 13)
                  		$t._save(e);
              });
            	$thd = $t.find('tr.table-head');
              $th = $('<td/>');
              $t.addbtn = $('<button class="save-rec" title="add record">+</button>').on('click',$t._save).appendTo( $th );
              $t.rowform.append($th);
          		$t.find('tr.table-head th').each(function(i){
              		if(i != 0){
                  	var $newinput = $('<td><input name="'+$(this).text().toLowerCase()+'"></td>');
                  $newinput.appendTo($t.rowform);
                  $t.rowform.fadeIn(250);
                  }
            	});
             ...