I have the following HTML/JS code:

<div style="position:relative;transition:all 0.3s cubic-bezier(0.65,0.05,0.36,1);height:0px;"><iframe width="100%" height="100%" onload="window.addEventListener('message',e=>{if('https://m.ink'===e.origin){var t=e.data.split(':'),o=t[0],s=t[1],n=t[2];if(['load','show','hide','resize'].includes(o)){var r="mink_david_f8cbd4l3",i=document.getElementById(r);if(i&&s===r){var d=document.getElementById(r+'_preview');'load'===o?i.getAttribute('src')||(i.setAttribute('src','https://m.ink/david/this-is-a-quick-test-f8cbd4l3'),i.onload=()=>{sessionStorage.setItem(r+'_loaded','true'),d&&d.contentWindow&&d.contentWindow.postMessage('loaded','*'),'true'===sessionStorage.getItem(r+'_show')&&(i.style.setProperty('top',0),i.style.setProperty('pointer-events','auto'))}):'show'===o?'true'===sessionStorage.getItem(r+'_loaded')?(d.contentWindow.postMessage('loaded','*'),i.style.setProperty('top',0),i.style.setProperty('pointer-events','auto')):d&&d.contentWindow&&(d.contentWindow.postMessage('loading','*'),sessionStorage.setItem(r+'_show','true')):'hide'===o?(i.style.setProperty('top','100%'),i.style.setProperty('pointer-events','none')):'resize'===o&&n&&i.parentElement.style.setProperty('height',n+'px')}}}});" title="Mink Preview" src="https://m.ink/iframe/david/this-is-a-quick-test-f8cbd4l3?b=rgba%280%2C0%2C0%2C0.15%29&bg=%23FFFFFF&d=%233D4461&l=%23E81247&t=%232A304A" style="border:0px;" id="mink_david_f8cbd4l3_preview"></iframe><iframe title="Mink Full Screen" style="transition:all 0.3s cubic-bezier(0.65,0.05,0.36,1);position:fixed;width:100vw;height:100vh;top:100%;left:0;border:0;z-index:10000;pointer-events:auto;background:white;" id="mink_david_f8cbd4l3"></iframe></div>

I thought I could use Custom HTML, but it doesn’t seem to like that.

When I preview the page, it looks like this:

Doesn’t make any sense.

New to WordPress so not sure if I’m missing something.