Modals

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='relative h-[560px] overflow-hidden bg-neutral-100'><div class='absolute inset-0 bg-black/40'></div><aside class='absolute inset-y-0 right-0 flex w-full max-w-md flex-col bg-white shadow-2xl'><div class='flex items-center justify-between border-b border-neutral-200 px-6 py-5'><h3 class='text-lg font-semibold text-black'>Page settings</h3><button type='button' class='grid h-9 w-9 place-items-center rounded-full border border-neutral-200 text-neutral-500' aria-label='Close'>×</button></div><div class='flex-1 space-y-5 overflow-y-auto p-6'><label class='block text-sm font-medium text-black'>Title<input type='text' value='Public site: Home' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></label><label class='block text-sm font-medium text-black'>Description<textarea rows='4' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea></label></div><div class='flex justify-end gap-2 border-t border-neutral-200 px-6 py-4'><button type='button' class='rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black'>Cancel</button><button type='button' class='rounded-lg bg-black px-4 py-2 text-sm font-semibold text-white'>Save</button></div></aside></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='relative grid min-h-[560px] place-items-center overflow-hidden bg-neutral-100 p-6'><div class='absolute inset-0 bg-black/40'></div><div class='relative w-full max-w-md rounded-3xl bg-white p-8 shadow-2xl'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'><h3 class='mt-6 text-2xl font-semibold tracking-tight text-black'>Unlock more projects</h3><ul class='mt-4 space-y-2 text-sm text-neutral-600'><li>✓ Unlimited projects</li><li>✓ Interactions and animations</li><li>✓ Priority support</li></ul><button type='button' class='mt-7 w-full rounded-xl bg-black py-3 text-sm font-semibold text-white'>Upgrade</button><button type='button' class='mt-2 w-full py-2 text-sm text-neutral-500'>Maybe later</button></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='relative grid min-h-[520px] place-items-start justify-items-center overflow-hidden bg-neutral-100 p-6 pt-24'><div class='absolute inset-0 bg-black/40'></div><div class='relative w-full max-w-xl overflow-hidden rounded-2xl bg-white shadow-2xl'><div class='flex items-center gap-3 border-b border-neutral-200 px-5 py-4'><span class='text-neutral-400'>⌕</span><input type='text' placeholder='Search commands' class='w-full text-sm outline-none'><span class='rounded border border-neutral-200 px-1.5 text-xs text-neutral-400'>Esc</span></div><ul class='p-2 text-sm'><li class='flex items-center justify-between rounded-lg bg-neutral-100 px-3 py-2.5 text-black'>New page<span class='font-mono text-xs text-neutral-500'>N</span></li><li class='flex items-center justify-between rounded-lg px-3 py-2.5 text-neutral-700'>Open code panel<span class='font-mono text-xs text-neutral-500'>C</span></li><li class='flex items-center justify-between rounded-lg px-3 py-2.5 text-neutral-700'>Switch to Interact<span class='font-mono text-xs text-neutral-500'>V</span></li><li class='flex items-center justify-between rounded-lg px-3 py-2.5 text-neutral-700'>Share project<span class='font-mono text-xs text-neutral-500'>S</span></li></ul></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='relative grid min-h-[520px] place-items-center overflow-hidden bg-neutral-100 p-6'><div class='absolute inset-0 bg-black/40'></div><div class='relative w-full max-w-lg rounded-3xl bg-white p-8 shadow-2xl'><h3 class='text-xl font-semibold text-black'>Upload an image</h3><div class='mt-5 grid place-items-center rounded-2xl border-2 border-dashed border-neutral-300 px-6 py-12 text-center'><p class='font-medium text-black'>Drop a file here</p><p class='mt-1 text-sm text-neutral-500'>or <a href='#' class='text-black underline'>browse</a> from your computer</p><p class='mt-4 text-xs text-neutral-400'>PNG, JPG or SVG up to 5 MB</p></div><div class='mt-6 flex justify-end gap-2'><button type='button' class='rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black'>Cancel</button><button type='button' class='rounded-lg bg-black px-4 py-2 text-sm font-semibold text-white'>Upload</button></div></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='relative mx-auto flex h-[520px] max-w-sm flex-col justify-end overflow-hidden bg-neutral-100'><div class='absolute inset-0 bg-black/40'></div><div class='relative rounded-t-3xl bg-white p-5 shadow-2xl'><span class='mx-auto block h-1.5 w-10 rounded-full bg-neutral-300'></span><h3 class='mt-4 text-center font-semibold text-black'>Share page</h3><ul class='mt-4 divide-y divide-neutral-100 text-sm'><li class='py-3.5 text-black'>Copy link</li><li class='py-3.5 text-black'>Send by email</li><li class='py-3.5 text-black'>Download HTML</li></ul><button type='button' class='mt-3 w-full rounded-xl border border-neutral-300 py-3 text-sm font-semibold text-black'>Cancel</button></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='relative grid min-h-[480px] place-items-center overflow-hidden bg-neutral-100 p-6'><div class='absolute inset-0 bg-black/40'></div><div class='relative w-full max-w-sm rounded-3xl bg-white p-8 text-center shadow-2xl'><span class='mx-auto grid h-14 w-14 place-items-center rounded-full bg-black text-2xl text-white'>✓</span><h3 class='mt-5 text-xl font-semibold text-black'>Page published</h3><p class='mt-2 text-sm text-neutral-600'>Your page is live. Share the link with anyone.</p><button type='button' class='mt-6 w-full rounded-xl bg-black py-3 text-sm font-semibold text-white'>Copy link</button></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='relative grid min-h-[480px] place-items-center overflow-hidden bg-neutral-200 p-6'><div class='absolute inset-0 bg-black/30'></div><div class='relative w-full max-w-md rounded-2xl border border-neutral-800 bg-black p-8 shadow-2xl'><h3 class='text-xl font-semibold text-white'>Leave without saving?</h3><p class='mt-3 text-sm text-neutral-400'>You have changes that are not saved yet. They will be lost if you leave.</p><div class='mt-8 flex justify-end gap-2'><button type='button' class='rounded-lg border border-neutral-700 px-4 py-2 text-sm font-medium text-white'>Stay</button><button type='button' class='rounded-lg bg-white px-4 py-2 text-sm font-semibold text-black'>Leave</button></div></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='relative grid min-h-[480px] place-items-center overflow-hidden bg-neutral-100 p-6'><div class='absolute inset-0 bg-black/40'></div><div class='relative w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl'><h3 class='text-lg font-semibold text-black'>Rename project</h3><label class='mt-4 block text-sm font-medium text-black'>Name<input type='text' value='Public site' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></label><div class='mt-6 flex justify-end gap-2'><button type='button' class='rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black'>Cancel</button><button type='button' class='rounded-lg bg-black px-4 py-2 text-sm font-semibold text-white'>Save</button></div></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='relative grid min-h-[520px] place-items-center overflow-hidden bg-neutral-100 p-6'><div class='absolute inset-0 bg-black/40'></div><div class='relative w-full max-w-lg rounded-3xl bg-white p-8 shadow-2xl'><button type='button' class='absolute right-5 top-5 grid h-9 w-9 place-items-center rounded-full border border-neutral-200 text-neutral-500' aria-label='Close'>×</button><h3 class='pr-10 text-2xl font-semibold tracking-tight text-black'>What is new</h3><p class='mt-3 text-neutral-600'>Interactions now run in Preview, so you can click through your frames like a prototype.</p><p class='mt-3 text-neutral-600'>Hover states and animations are saved as plain Tailwind classes.</p><button type='button' class='mt-6 rounded-lg bg-black px-5 py-2.5 text-sm font-semibold text-white'>Got it</button></div></div>

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='relative grid min-h-[480px] place-items-center overflow-hidden bg-neutral-100 p-6'><div class='absolute inset-0 bg-black/40'></div><div class='relative w-full max-w-sm rounded-2xl bg-white p-6 shadow-2xl'><h3 class='text-lg font-semibold text-black'>Delete this page?</h3><p class='mt-2 text-sm text-neutral-600'>This removes the page and its versions. You cannot undo it.</p><div class='mt-6 flex justify-end gap-2'><button type='button' class='rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-black'>Cancel</button><button type='button' class='rounded-lg bg-black px-4 py-2 text-sm font-semibold text-white'>Delete</button></div></div></div>