JSFiddle - React, Tailwind, and code Playground

by Csaba Hellinger

HTML

<iframe id="can-i-use-ctv" src="data:text/html;charset=utf-8;base64,PGh0bWw+PGhlYWQ+PC9oZWFkPjxib2R5PmhlbGxvIfCfmJ88L2JvZHk+PC9odG1sPg==">

</iframe>

CSS

iframe#can-i-use-ctv {
    width: 200px;
    height: 200px;
    background: pink;
    border: none;
}

JavaScript

function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode(parseInt(p1, 16));
    }));
}

const src = [
    '<html>',
        '<head>',
        '</head>',
        '<body>',
	        'hello!😟',
        '</body>',
    '</html>'
].join('');

const uri = 'data:text/html;charset=utf-8;base64,' + b64EncodeUnicode(src);

console.log(uri);