JSFiddle - React, Tailwind, and code Playground

HTML

<div style="border: none; overflow-x: visible;" class="table-responsive">

          <div style="background-color:white; width:35%; position:absolute; left:34%;" class="confirm">
            <h3 style="color:black">Are you sure?</h3>
            <button style="background-color:black;color:blue">Cancel</button>
            <button style="background-color:black;color:blue">Confirm</button>
          </div>

          <table id="tbl" style="width:100%">
              <tbody style="display: block; overflow-y: auto">
                  <tr>
                      <td style="padding-right:1em">
                          <a class="remove">
                              <button>Remove</button>
                          </a>
                      </td>
                      <td style="padding-right:1em">
                          <a>
                              <button>Edit</button>
                          </a>
                      </td>
                      <td class="coursetext">
                          <h4 align="left"><b>{{ course }}</b><br><span class="tohide"><b>{{ sections }}</b></span></h4>
                          <hr>
                      </td>

                  </tr>
              </tbody>
          </table>
      </div>

CSS

.table-responsive:not(.confirm) {
            filter: blur(3px);
            pointer-events: none;
          }