Created
July 5, 2023 10:30
-
-
Save Hugoberry/681f75e29e62636b8ef2b7e7e3a66181 to your computer and use it in GitHub Desktop.
Tailwindcss play link https://play.tailwindcss.com/jJ7APsi5d8 ide window prime for embedding some code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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