JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Web SQL Database Example</title>
  <script>
    //Open or create the database
    var db=openDatabase('contacts','','my contacts app', 2 * 1024 * 1024);
    
    //Initialize the database
    db.transaction(function(tx) {
      tx.executeSql('CREATE TABLE IF NOT EXISTS contacts(id integer primary key autoincrement, firstname, lastname, phonenumber)');
    });
    
    function addContact() {
      var inputFirstName=document.getElementById("firstname").value;
      var inputLastName=document.getElementById("lastname").value;
      var inputPhoneNumber=document.getElementById("phonenumber").value;
      
      db.transaction(function(tx) {
        tx.executeSql('INSERT INTO contacts(firstname,lastname,phonenumber) VALUES (?,?,?)',[inputFirstName,inputLastName,inputPhoneNumber], function(tx, results) {
          //Create the row and its cells
          var contactRow=document.createElement("tr");
          var id=document.createElement("td");
          var firstname=document.createElement("td");
          var lastname=document.createElement("td");
          var phonenumber=document.createElement("td");
          var removeButton=document.createElement("td");
          //Set values coming from the database
          id.textContent=results.insertId;
          firstname.textContent=inputFirstName;
          lastname.textContent=inputLastName;
          phonenumber.textContent=inputPhoneNumber;
          removeButton.innerHTML='<button onclick="removeContact('+ results.insertId +')">Delete</button>';
          //Add cells to the row
          contactRow.setAttribute("id","c"+results.insertId);
          contactRow.appendChild(id);
          contactRow.appendChild(firstname);
         ...