JSFiddle - React, Tailwind, and code Playground
by taffrail
HTML
<div class="framer-8xadul" data-framer-name="Embed" name="Embed"><div class="framer-1qufylu-container"><iframe srcdoc="
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
:root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
box-sizing: border-box;
-webkit-font-smoothing: inherit;
}
h1, h2, h3, h4, h5, h6, p, figure {
margin: 0;
}
body, input, textarea, select, button {
font-size: 12px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="taffrail-embed"><div class="taffrail-rw"><a data-tr-url data-tr-key="TFfos5FOyMtIBdFiN1u91Ml.wJqr-v3ywxaJv6zMI746R1i0fkS79jM3IUPWLcXtZc" href="https://www.staging-advice.taffrail.com/c/TFUwuzjp0nULY9wgqJE4q8M/iframe?"></a></div></div><script src="https://www.staging-advice.taffrail.com/4db0ae47/dist/js/embed.bundle.js" async charset="utf-8"></script>
<script type="module">
let height = 0
function sendEmbedHeight() {
window.parent.postMessage({
embedHeight: height
}, "*")
}
const observer = new ResizeObserver((entries) => {
if (entries.length !== 1) return
const entry = entries[0]
if (entry.target !== document.body) return
height = entry.contentRect.height
sendEmbedHeight()
})
observer.observe(document.body)
...