JSFiddle - React, Tailwind, and code Playground

by meeky333

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titles Category Values</title>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  .incoming td {
    background-color: #e0ffec;
  }
  button {
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Current Values in 'Titles' Category</h2>
<table>
  <tr>
    <th>Key</th>
    <th>Value</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Mr</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Mrs</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Miss</td>
  </tr>
  <!-- Add more current values as needed -->
</table>

<h2>Incoming Values for 'Titles' Category</h2>
<table>
  <tr>
    <th>Key</th>
    <th>Value</th>
    <th>Action</th>
  </tr>
  <tr class="incoming">
    <td>New</td>
    <td>Dr</td>
    <td><button type="button" onclick="approveChange(this)">Approve</button></td>
  </tr>
  <tr class="incoming">
    <td>New</td>
    <td>Mx</td>
    <td><button type="button" onclick="approveChange(this)">Approve</button></td>
  </tr>
  <!-- Add more incoming values as needed -->
</table>

<script>
function approveChange(button) {
  // Placeholder for approval logic
  alert("Approved: " + button.parentElement.previousSibling.textContent);
  // Here, implement the function to handle approval.
  // This could involve sending a request to a server or simply updating the UI to reflect the approval.
}
</script>

</body>
</html>