<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/alpinejs" defer></script>
<div class="flex h-48 overflow-hidden relative" x-data="{ code: '' }">
<textarea
spellcheck="false"
class="bg-slate-100 grow resize-none outline-none font-mono text-xs text-slate-700 p-2 whitespace-pre"
x-ref="code"
x-on:input="code = $el.value"
x-init="$el.value = $el.value.trimEnd().replace(new RegExp(`^\\s{${$el.value.trimEnd().match(/^\s+/gm).map(x => x.length).reduce((x, y) => Math.min(x, y))}}`, 'gm'), '')"
>
<!-- Write your Tailwind + Alpine.js code here -->
</textarea>
<iframe
class="bg-slate-50 w-1/3"
srcdoc="<!DOCTYPE html><script src='https://cdn.tailwindcss.com'></script><script src='https://unpkg.com/alpinejs' defer></script>"
x-ref="frame"
x-effect="$el.contentDocument.body && ($el.contentDocument.body.innerHTML = code)"
x-on:load="code = $refs.code.value"
></iframe>
<button
class="absolute right-4 bottom-4"
x-on:click="open(URL.createObjectURL(new Blob([$refs.frame.contentDocument.documentElement.outerHTML], { type: 'text/html' })))"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3z"
/>
</svg>
</button>
</div>
