CINXE.COM

<!doctype html><html lang="en" style="overscroll-behavior-x:none"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta property="og:site_name" content="CodeSandbox"><link href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <style> svg { background: transparent; } path { fill: black; } @media (prefers-color-scheme: dark) { path { fill: white; } } </style> <path fill-rule='evenodd' clip-rule='evenodd' d='M81.8182 18.1818V81.8182H18.1818V18.1818H81.8182ZM10 90V10H90V90H10Z'/> </svg>" rel="icon"/><link rel="mask-icon" href="/csb-ios.svg" color="#000"><link rel="manifest" href="/manifest.json"><script src="/static/js/env-config.js"></script><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script><script>WebFont.load({google:{families:["Source Code Pro:500","Roboto:300,400,500,700","Poppins:300,400,500,600,700"]}})</script><link rel="alternate" type="application/json+oembed" href="https://codesandbox.io/oembed?url=https://codesandbox.io/s/beautiful-kirch-th1e0j&format=json" title="beautiful-kirch-th1e0j" /><title>beautiful-kirch-th1e0j - CodeSandbox</title><link href="/static/fonts/monolisa.css" rel="stylesheet"><link crossorigin="anonymous" rel="preload" href="/static/fonts/inter/Inter-Regular.woff2" as="font"><link crossorigin="anonymous" rel="preload" href="/static/fonts/inter/Inter-Medium.woff2" as="font"><link crossorigin="anonymous" rel="preload" href="/static/fonts/inter/Inter-Bold.woff2" as="font"><link href="/static/fonts/inter/inter.css" rel="stylesheet"><link crossorigin="anonymous" rel="preload" href="/static/fonts/everett/TWKEverett-Light-web.woff2" as="font"><link crossorigin="anonymous" rel="preload" href="/static/fonts/everett/TWKEverett-Regular-web.woff2" as="font"><link crossorigin="anonymous" rel="preload" href="/static/fonts/everett/TWKEverett-Medium-web.woff2" as="font"><link href="/static/fonts/everett/everett.css" rel="stylesheet"><script src="https://codesandbox.io/static/browserfs12/browserfs.min.js" type="text/javascript"></script><script>BrowserFS&&(window.process={env:{VSCODE_DEV:!1},nextTick:function(e){return requestAnimationFrame(e)},once:BrowserFS.BFSRequire("process").once,removeListener:function(){}},window.Buffer=BrowserFS.BFSRequire("buffer").Buffer)</script><link data-name="/public/vscode33/vs/editor/editor.main" rel="preload" as="style" href="/public/vscode33/vs/editor/codesandbox.editor.main.css"><link rel="preload" as="script" href="/public/vscode33/vs/editor/codesandbox.editor.main.js"><link href="https://codesandbox.io/static/css/common.fbffe659.chunk.css" rel="stylesheet"><link href="https://codesandbox.io/static/css/vendors~app.314e3169.chunk.css" rel="stylesheet"><link href="https://codesandbox.io/static/css/default~app~embed.aeaefc59.chunk.css" rel="stylesheet"><link href="https://codesandbox.io/static/css/app.8d25fd39.css" rel="stylesheet"><meta property="og:title" name="og:title" content="beautiful-kirch-th1e0j - CodeSandbox"> <meta property="twitter:title" name="twitter:title" content="beautiful-kirch-th1e0j - CodeSandbox"> <meta property="description" name="description" content="beautiful-kirch-th1e0j by atomiks using @floating-ui/dom, parcel-bundler"> <meta property="og:description" name="og:description" content="beautiful-kirch-th1e0j by atomiks using @floating-ui/dom, parcel-bundler"> <meta property="twitter:description" name="twitter:description" content="beautiful-kirch-th1e0j by atomiks using @floating-ui/dom, parcel-bundler"> <meta property="og:author" name="og:author" content="atomiks"> <meta property="article:author" name="article:author" content="atomiks"> <meta property="article:published_time" name="article:published_time" content="2022-05-20T06:54:58"> <meta property="article:modified_time" name="article:modified_time" content="2022-12-27T15:34:09"> <meta property="article:section" name="article:section" content="parcel"> <meta property="og:type" name="og:type" content="article"> <meta property="og:url" name="og:url" content="https://codesandbox.io/s/th1e0j"> <meta property="twitter:site" name="twitter:site" content="@codesandbox"> <script type="application/ld+json">{"name":"beautiful-kirch-th1e0j","text":null,"keywords":"parcel","author":{"name":"atomiks","image":"https://avatars.githubusercontent.com/u/22450188?v=4","url":"https://codesandbox.io/u/atomiks","@type":"Person"},"image":{"url":"https://codesandbox.io/api/v1/sandboxes/th1e0j/screenshot.png","@type":"ImageObject"},"url":"https://codesandbox.io/s/th1e0j","publisher":{"name":"CodeSandbox","logo":{"width":1200,"url":"https://codesandbox.io/static/img/banner.png","height":630,"@type":"ImageObject"},"@type":"Organization"},"codeRepository":"https://codesandbox.io/s/th1e0j","codeSampleType":"full solution","dateCreated":"2022-05-20T06:54:58","dateModified":"2022-12-27T15:34:09","isBasedOn":"https://codesandbox.io/s/5l7m95","programmingLanguage":"parcel","thumbnailUrl":"https://codesandbox.io/api/v1/sandboxes/th1e0j/screenshot.png","workExample":{"url":"https://th1e0j.csb.app","applicationCategory":"parcel","operatingSystem":"Web app","screenshot":"https://codesandbox.io/api/v1/sandboxes/th1e0j/screenshot.png","@type":"SoftwareApplication"},"@context":"https://schema.org","@type":"SoftwareSourceCode"}</script> <link rel="canonical" href="https://codesandbox.io/s/5l7m95" /> <meta property="og:image" name="og:image" content="https://codesandbox.io/api/v1/sandboxes/th1e0j/screenshot.png"> <meta property="twitter:image:src" name="twitter:image:src" content="https://codesandbox.io/api/v1/sandboxes/th1e0j/screenshot.png"> <meta property="og:image:alt" name="og:image:alt" content="A preview of beautiful-kirch-th1e0j"> <meta property="og:image:width" name="og:image:width" content="1200"> <meta property="twitter:image:width" name="twitter:image:width" content="1200"> <meta property="og:image:height" name="og:image:height" content="630"> <meta property="twitter:image:height" name="twitter:image:height" content="630"> <meta property="twitter:card" name="twitter:card" content="summary_large_image"> </head><body style="margin:0;padding:0"><div id="root"></div><script src="https://codesandbox.io/static/js/vendors~app~codemirror-editor~monaco-editor~sandbox.f80b3d7b3.chunk.js" crossorigin="anonymous"></script><script src="https://codesandbox.io/static/js/common-sandbox.4915834c1.chunk.js" crossorigin="anonymous"></script><script src="https://codesandbox.io/static/js/common.56083ff0a.chunk.js"></script><script src="https://codesandbox.io/static/js/vendors~app.6c398f8b6.chunk.js"></script><script src="https://codesandbox.io/static/js/default~app~embed~sandbox~sandbox-startup.3ff9f1307.chunk.js" crossorigin="anonymous"></script><script src="https://codesandbox.io/static/js/default~app~embed~sandbox.5751b4014.chunk.js" crossorigin="anonymous"></script><script src="https://codesandbox.io/static/js/default~app~embed.93390617a.chunk.js"></script><script src="https://codesandbox.io/static/js/app.82c3a3ddb.js"></script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'916931855c34fd2b',t:'MTc0MDMzNDQ0NS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>