JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Allwinner SoC GPIO Mapper</h1>
<form name="mapper">
  <p>Allwinner port <input name="port" size="8" id="port" placeholder="PA02" type="text" /> is GPIO <span id="gpio">...</span> <input type="submit" value="Convert" /></p>
</form>

CSS

body { margin:0 auto; max-width:90%; font:16px/1.5 sans-serif; }
input { font:inherit; }
#port { border:2px solid; padding:0.2em; border-radius:4px; }
#gpio { vertical-align:top; display:inline-block; border:2px solid; min-width:1.5em; min-height:1.5em; border-radius:4px; padding:0.2em; text-align:center; font-weight:bold; }

JavaScript

function portToGpio( port ) {
	var portLetter = port.replace(/[0-9]/g, '').slice(-1);
  var portNumber = parseInt( port.replace(/[A-Z]/ig, '') );
  
  // (position of letter in alphabet - 1) * 32 + pin number
  return ( portLetter.charCodeAt(0) - 65 ) * 32 + portNumber;
}

document.mapper.onsubmit = function() {
  document.getElementById( 'gpio' ).textContent = portToGpio( this.port.value );
  return false;
};