JSFiddle - React, Tailwind, and code Playground

by prasun_sultania

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js" type="text/javascript"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
  <script type="text/javascript">
  $( document ).ready( function() {
    $("#extendtech-select-vendor").select2({theme:"classic",width:"200px"});
    $("#extendtech-select-order").select2({theme:"classic",width:"200px",minimumResultsForSearch:"-1"});
  });
  function delete_row(no)
  {
   document.getElementById("row"+no+"").outerHTML="";
  }
  
  function add_row()
  {
   var new_input=document.getElementById("new_input").value;
   var new_output=document.getElementById("new_output").value;
   
    
   var table=document.getElementById("extendtech-data-table");
   var table_len=(table.rows.length)-1;
   var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='input"+table_len+"'><div class='extendtech-cell-styling' contenteditable='true'>"+new_input+"</div></td><td id='output"+table_len+"'><div class='extendtech-cell-styling' contenteditable='true'>"+new_output+"</div></td><td><button class='delete' onclick='delete_row("+table_len+")'><i class='fa fa-trash-o' aria-hidden='true'></i></button></td></tr>";
  
   document.getElementById("new_input").value="";
   document.getElementById("new_output").value="";
   
  }
  </script>
  <style>
  @import url('https://fonts.googleapis.com/css?family=Open+Sans');
    body{
      font-family: 'Open Sans', sans-serif;
      color:#333333;
    }
    table {
      border: none;
      border-collapse: collapse;
      border-color: transparent;
      font-size: 14px;
    }
    .extendtech-table-header{
      background: #e5e5e5 !important;
       ...