JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openpgp/4.4.8/openpgp.min.js"></script>
<table>
<tr>
<td><label for="publicKey">Public Key:</label></td><td><textarea id="publicKey" name="publicKey" rows="7" cols="68"></textarea></tr><br />
<tr><td><label for="message">Message:</label></td><td><textarea id="message" name="message" rows="7" cols="68"></textarea></tr><br />
<tr><td><label for="signature">Signature:</label></td><td><textarea id="signature" name="signature" rows="7" cols="68"></textarea></tr><br /><br />
</table>
<center><br />
<input type="Submit" value="Check Valid Signature" onclick="verifySignedMessage()" /><br /><br />
<span id="result">Hit the button after filling appropriate values in all of the fields.</span><br /><br />
<textarea id="log" rows="16" cols="110"></textarea>
</center>

CSS

#result {
  font-weight: bold;
  color: red;
}

JavaScript

var _ = (x) => document.querySelector(x);
var validity = false;
var verifySignedMessage = async() => {
    let publicKey = _("#publicKey").value.trim();
	  let signedmsg = _("#message").value.trim();
	  let detachedSig = _("#signature").value.trim();
	
    options = {
        message: openpgp.cleartext.fromText(signedmsg),        // CleartextMessage or Message object
        signature: (await openpgp.signature.readArmored(detachedSig)), // parse detached signature
        publicKeys: (await openpgp.key.readArmored(publicKey)).keys     // for verification
    };

    openpgp.verify(options).then(function(verified) {
        validity = verified.signatures[0].valid; // true
        if (validity) {
            _("#result").innerText = 'Signed by key id ' + verified.signatures[0].keyid.toHex();
        }
		    else {
            _("#log").value = JSON.stringify(verified);
            _("#result").innerText = "";
            setTimeout(() => _("#result").innerText = "Failed.", 750);
        }
    });
}