Skip to content

Instantly share code, notes, and snippets.

@Hugoberry

Hugoberry/CodeWindow.html

Created July 5, 2023 10:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hugoberry/681f75e29e62636b8ef2b7e7e3a66181 to your computer and use it in GitHub Desktop.
Save Hugoberry/681f75e29e62636b8ef2b7e7e3a66181 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwindcss play link https://play.tailwindcss.com/jJ7APsi5d8 ide window prime for embedding some code
Raw
CodeWindow.html
<section class="container mx-auto mt-8 w-full max-w-none md:mt-10 lg:mt-12 xl:max-w-screen-2xl xl:px-16">
<div class="before:bg-marketing-gradient-brand before:-z-high after:z-high safari:before:will-change-transform xl:after:border-marketing-divider relative relative col-span-12 flex select-none font-sans will-change-transform before:pointer-events-none before:absolute before:inset-0 before:hidden before:rounded-[20%] before:opacity-[0.12] before:blur-3xl after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] md:h-[min(70vw,90vh)] md:max-h-[600px] xl:max-h-[800px] xl:rounded-xl xl:before:block xl:after:border">
<div class="xl:bg-marketing-surface-base relative flex flex-1 flex-col overflow-hidden xl:rounded-[inherit]">
<div class="border-marketing-divider hidden h-12 flex-none grid-cols-[1fr_auto_1fr] border-b xl:grid">
<div class="flex items-center gap-4 pl-4">
<div class="group flex gap-2">
<div class="h-3 w-3 rounded-full bg-white/10"></div>
<div class="h-3 w-3 rounded-full bg-white/10"></div>
<a class="flex h-3 w-3 items-center justify-center rounded-full bg-white/10 text-transparent transition-colors duration-200 ease-out focus:bg-white/20 group-hover:bg-white/20" href="/examples/live-cursors-chat/nextjs/preview"></a>
</div>
<button class="bg-marketing-surface-brand-subtle text-marketing-brand group relative inline-flex h-9 w-9 select-none appearance-none items-center justify-center overflow-hidden rounded-md p-0 text-sm font-medium outline-none transition duration-300 ease-out will-change-transform" type="button" title="Close sidebar">
<div class="pointer-events-none absolute inset-0 z-0 rounded-md opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" style="--pointer-x: 16.5px; --pointer-y: 14.5px; top: -100px; left: -100px; width: 200px; height: 200px; transform: translateX(var(--pointer-x)) translateY(var(--pointer-y)); background-image: radial-gradient(100px, rgba(247, 247, 248, 0.12), rgba(247, 247, 248, 0));"></div>
<span class="relative z-10 flex items-center"
><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="fill-current" aria-label="Close sidebar"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4Zm6.5-.5H13a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5H7.5v-9Z"></path></svg
></span>
</button>
</div>
<a class="no-focus-ring text-marketing-subtler hover:text-marketing-subtler focus:text-marketing-subtler flex items-center justify-center text-center text-sm font-medium transition-opacity duration-200 ease-out hover:opacity-80 focus:opacity-80" target="_blank" href="https://github.com/liveblocks/liveblocks/blob/main/examples/nextjs-live-cursors-chat/pages/index.tsx"
><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 fill-white/20"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 6h.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h.5V4.5a3.5 3.5 0 1 1 7 0V6ZM10 6V4.5a2 2 0 1 0-4 0V6h4Z"></path></svg>index.tsx</a
>
<div class="flex items-center justify-end pr-1.5">
<button class="bg-marketing-surface-faded active:bg-marketing-surface-faded-bolder focus:bg-marketing-surface-faded-bold group relative inline-flex h-9 select-none appearance-none items-center justify-center overflow-hidden rounded-md px-3.5 text-sm font-medium outline-none transition duration-300 ease-out will-change-transform" type="button">
<div class="pointer-events-none absolute inset-0 z-0 rounded-md opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" style="--pointer-x: 0px; --pointer-y: 0px; top: -100px; left: -100px; width: 200px; height: 200px; transform: translateX(var(--pointer-x)) translateY(var(--pointer-y)); background-image: radial-gradient(100px, rgba(247, 247, 248, 0.08), rgba(247, 247, 248, 0));"></div>
<span class="relative z-10 flex items-center"
><span class="block md:mr-2" style="transform: none;"
><svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="fill-current"><path d="M13 9a5 5 0 1 1-5-5h3.091L9.3 5.793 10 6.5l3-3-3-3-.701.707L11.093 3H8a6 6 0 1 0 6 6h-1Z"></path></svg></span
><span class="hidden md:inline-block">Reset<span class="sr-only"> example</span></span></span
>
</button>
</div>
</div>
<div class="relative flex min-h-0 flex-1 overflow-hidden">
<div class="border-marketing-divider absolute z-10 hidden h-full border-r xl:block" style="width: 220px; transform: translateX(0%) translateZ(0px);">
<div dir="ltr" class="h-full w-full" style="position: relative; --radix-scroll-area-corner-width: 0px; --radix-scroll-area-corner-height: 0px; overflow: hidden;">
<style>
[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}
</style>
<div data-radix-scroll-area-viewport="" class="ScrollArea_viewport__NHJhI" style="overflow: hidden scroll;">
<div style="min-width: 100%; display: table;">
<ul class="flex max-h-full w-full flex-col overflow-hidden py-2" role="tree" style="--level: 0;">
<li class="flex flex-col" style="opacity: 1; transform: none;">
<button class="no-focus-ring text-marketing-subtler hover:text-marketing focus:text-marketing mx-2 flex flex-1 items-center truncate rounded py-1.5 pl-2.5 pr-2 text-left text-xs font-medium transition-colors duration-150 ease-out hover:bg-white/10 focus:bg-white/10" role="treeitem" aria-expanded="false">
<div style="width: calc(var(--level) * 12px);"></div>
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 flex-none fill-current opacity-60"><path d="M5.585 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8L6.295 2.295A1 1 0 0 0 5.585 2Z"></path></svg><span class="flex-1 truncate">components</span>
<div class="-mr-1 ml-2 flex-none" style="transform: none;">
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current opacity-60"><path d="M11.0007 8L6.00078 13L5.30078 12.3L9.60078 8L5.30078 3.7L6.00078 3L11.0007 8Z"></path></svg>
</div>
</button>
</li>
<li class="flex flex-col" style="opacity: 1; transform: none;">
<button class="no-focus-ring text-marketing-subtler hover:text-marketing focus:text-marketing mx-2 flex flex-1 items-center truncate rounded py-1.5 pl-2.5 pr-2 text-left text-xs font-medium transition-colors duration-150 ease-out hover:bg-white/10 focus:bg-white/10" role="treeitem" aria-expanded="false">
<div style="width: calc(var(--level) * 12px);"></div>
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 flex-none fill-current opacity-60"><path d="M5.585 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8L6.295 2.295A1 1 0 0 0 5.585 2Z"></path></svg><span class="flex-1 truncate">hooks</span>
<div class="-mr-1 ml-2 flex-none" style="transform: none;">
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current opacity-60"><path d="M11.0007 8L6.00078 13L5.30078 12.3L9.60078 8L5.30078 3.7L6.00078 3L11.0007 8Z"></path></svg>
</div>
</button>
</li>
<li class="flex flex-col" style="opacity: 1; transform: none;">
<button class="no-focus-ring text-marketing-subtler hover:text-marketing focus:text-marketing mx-2 flex flex-1 items-center truncate rounded py-1.5 pl-2.5 pr-2 text-left text-xs font-medium transition-colors duration-150 ease-out hover:bg-white/10 focus:bg-white/10" role="treeitem" aria-expanded="true">
<div style="width: calc(var(--level) * 12px);"></div>
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 flex-none fill-current opacity-60"><path d="M5.585 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8L6.295 2.295A1 1 0 0 0 5.585 2Z"></path></svg><span class="flex-1 truncate">pages</span>
<div class="-mr-1 ml-2 flex-none" style="transform: rotate(90deg) translateZ(0px);">
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current opacity-60"><path d="M11.0007 8L6.00078 13L5.30078 12.3L9.60078 8L5.30078 3.7L6.00078 3L11.0007 8Z"></path></svg>
</div>
</button>
<ul class="flex flex-col overflow-hidden overflow-hidden" role="group" style="--level: 1; opacity: 1; height: auto;">
<li class="flex" style="opacity: 1; transform: none;">
<button class="no-focus-ring text-marketing-subtler hover:text-marketing focus:text-marketing mx-2 flex flex-1 items-center truncate rounded py-1.5 pl-2.5 pr-2 text-left text-xs font-medium transition-colors duration-150 ease-out hover:bg-white/10 focus:bg-white/10" role="treeitem" aria-selected="false">
<div style="width: calc(var(--level) * 12px);"></div>
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 flex-none fill-current opacity-60"><path d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.907.907 0 0 0-.3-.7ZM18 4.4l5.6 5.6H18V4.4ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v16Z"></path></svg><span class="flex-1 truncate">_app.tsx</span>
</button>
</li>
<li class="flex" style="opacity: 1; transform: none;">
<button class="!bg-marketing-surface-brand-subtle !text-marketing-brand no-focus-ring text-marketing-subtler hover:text-marketing focus:text-marketing mx-2 flex flex-1 items-center truncate rounded py-1.5 pl-2.5 pr-2 text-left text-xs font-medium transition-colors duration-150 ease-out hover:bg-white/10 focus:bg-white/10" role="treeitem" aria-selected="true">
<div style="width: calc(var(--level) * 12px);"></div>
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 flex-none fill-current opacity-60"><path d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.907.907 0 0 0-.3-.7ZM18 4.4l5.6 5.6H18V4.4ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v16Z"></path></svg><span class="flex-1 truncate">index.tsx</span>
</button>
</li>
</ul>
</li>
<li class="flex flex-col" style="opacity: 1; transform: none;">
<button class="no-focus-ring text-marketing-subtler hover:text-marketing focus:text-marketing mx-2 flex flex-1 items-center truncate rounded py-1.5 pl-2.5 pr-2 text-left text-xs font-medium transition-colors duration-150 ease-out hover:bg-white/10 focus:bg-white/10" role="treeitem" aria-expanded="false">
<div style="width: calc(var(--level) * 12px);"></div>
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 flex-none fill-current opacity-60"><path d="M5.585 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8L6.295 2.295A1 1 0 0 0 5.585 2Z"></path></svg><span class="flex-1 truncate">styles</span>
<div class="-mr-1 ml-2 flex-none" style="transform: none;">
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current opacity-60"><path d="M11.0007 8L6.00078 13L5.30078 12.3L9.60078 8L5.30078 3.7L6.00078 3L11.0007 8Z"></path></svg>
</div>
</button>
</li>
<li class="flex" style="opacity: 1; transform: none;">
<button class="no-focus-ring text-marketing-subtler hover:text-marketing focus:text-marketing mx-2 flex flex-1 items-center truncate rounded py-1.5 pl-2.5 pr-2 text-left text-xs font-medium transition-colors duration-150 ease-out hover:bg-white/10 focus:bg-white/10" role="treeitem" aria-selected="false">
<div style="width: calc(var(--level) * 12px);"></div>
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 flex-none fill-current opacity-60"><path d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.907.907 0 0 0-.3-.7ZM18 4.4l5.6 5.6H18V4.4ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v16Z"></path></svg><span class="flex-1 truncate">liveblocks.config.ts</span>
</button>
</li>
<li class="flex" style="opacity: 1; transform: none;">
<button class="no-focus-ring text-marketing-subtler hover:text-marketing focus:text-marketing mx-2 flex flex-1 items-center truncate rounded py-1.5 pl-2.5 pr-2 text-left text-xs font-medium transition-colors duration-150 ease-out hover:bg-white/10 focus:bg-white/10" role="treeitem" aria-selected="false">
<div style="width: calc(var(--level) * 12px);"></div>
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 flex-none fill-current opacity-60"><path d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.907.907 0 0 0-.3-.7ZM18 4.4l5.6 5.6H18V4.4ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v16Z"></path></svg><span class="flex-1 truncate">package.json</span>
</button>
</li>
<li class="flex" style="opacity: 1; transform: none;">
<button class="no-focus-ring text-marketing-subtler hover:text-marketing focus:text-marketing mx-2 flex flex-1 items-center truncate rounded py-1.5 pl-2.5 pr-2 text-left text-xs font-medium transition-colors duration-150 ease-out hover:bg-white/10 focus:bg-white/10" role="treeitem" aria-selected="false">
<div style="width: calc(var(--level) * 12px);"></div>
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 flex-none fill-current opacity-60"><path d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.907.907 0 0 0-.3-.7ZM18 4.4l5.6 5.6H18V4.4ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v16Z"></path></svg><span class="flex-1 truncate">postcss.config.js</span>
</button>
</li>
<li class="flex" style="opacity: 1; transform: none;">
<button class="no-focus-ring text-marketing-subtler hover:text-marketing focus:text-marketing mx-2 flex flex-1 items-center truncate rounded py-1.5 pl-2.5 pr-2 text-left text-xs font-medium transition-colors duration-150 ease-out hover:bg-white/10 focus:bg-white/10" role="treeitem" aria-selected="false">
<div style="width: calc(var(--level) * 12px);"></div>
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 flex-none fill-current opacity-60"><path d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.907.907 0 0 0-.3-.7ZM18 4.4l5.6 5.6H18V4.4ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v16Z"></path></svg><span class="flex-1 truncate">tailwind.config.js</span>
</button>
</li>
<li class="flex" style="opacity: 1; transform: none;">
<button class="no-focus-ring text-marketing-subtler hover:text-marketing focus:text-marketing mx-2 flex flex-1 items-center truncate rounded py-1.5 pl-2.5 pr-2 text-left text-xs font-medium transition-colors duration-150 ease-out hover:bg-white/10 focus:bg-white/10" role="treeitem" aria-selected="false">
<div style="width: calc(var(--level) * 12px);"></div>
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 flex-none fill-current opacity-60"><path d="m25.7 9.3-7-7A.908.908 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.907.907 0 0 0-.3-.7ZM18 4.4l5.6 5.6H18V4.4ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6v16Z"></path></svg><span class="flex-1 truncate">tsconfig.json</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="hidden flex-none xl:block" style="width: 220px;"></div>
<div class="relative hidden xl:block" style="flex: 1 1 0%;">
<div class="absolute inset-0 -left-px select-text">
<div dir="ltr" class="language-tsx bg-marketing-surface-base-bold min-h-11 group relative h-full max-h-full w-full select-none text-xs will-change-transform" style="position: relative; --radix-scroll-area-corner-width: 0px; --radix-scroll-area-corner-height: 0px; overflow: hidden;">
<style>
[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}
</style>
<div data-radix-scroll-area-viewport="" class="ScrollArea_viewport__NHJhI" style="overflow: scroll;">
<div style="min-width: 100%; display: table;">
<pre
tabindex="0"
class="prism-code language-tsx relative py-3 outline-none"
style="color: var(--lb-color-text-code);"
><code class="block min-w-full font-mono"></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment