Browser Mockup Window + VSCode Editor Window

by Nicholas Berlette

HTML

<script
  src="https://esm.sh/@github/tab-container-element@3/dist/index.js"
  type="module"
></script>
<script src="https://unpkg.com/@unocss/[email protected]/preset-icons.global.js"></script>
<script src="https://unpkg.com/@unocss/[email protected]/preset-typography.global.js"></script>
<script src="https://unpkg.com/@unocss/[email protected]/preset-attributify.global.js"></script>
<script src="https://unpkg.com/@unocss/[email protected]/preset-uno.global.js"></script>
<script src="https://unpkg.com/@unocss/[email protected]/preset-wind.global.js"></script>
<script>
globalThis.__unocss = {
  extendTheme(theme) {
    return {
      ...theme,
      fontFamily: {
        ...theme.fontFamily,
        mono: ["OperatorMono Nerd Font", "Operator Mono Lig", "Operator Mono ScreenSmart", "Dank Mono", "DM Mono", "IBM Plex Mono", "Mono Lisa", "ui-monospace"],
        sans: ["Gotham Narrow ScreenSmart", "Gotham Narrow", "Whitney Narrow", "Whitney Narrow SSm", "Gotham Narrow SSm", "Inter", "ui-sans-serif", "AppleColorEmoji", "Apple Color Emoji"],
        serif: ["Sentinel ScreenSmart", "Sentinel SSm", "Sentinel", "Bitter", "IBM Plex Serif", "Georgia", "Times New Roman", "ui-serif"],
        header: ["Decimal", "Knockout-93", "Gotham", "Whitney", "Helvetica"],
      },
    };
  },
  presets: [
  	() => window.__unocss_runtime.presets.presetIcons({
      cdn: 'https://esm.sh/',
    }),
    () => window.__unocss_runtime.presets.presetUno({
      variablePrefix: "tw-",
    }),
    () => window.__unocss_runtime.presets.presetWind({
      variablePrefix: "tw-",
    }),
    () => window.__unocss_runtime.presets.presetTypography({
      
    }),
    () => window.__unocss_runtime.presets.presetAttributify({
      
    }),
  ],
  runtime: {
    
  },
};
</script>
<script src="https://unpkg.com/@unocss/[email protected]/core.global.js"></script>                                                                                                                                                                ...

Tailwind CSS

:root {
  color-scheme: light dark;
}
:is(html, body, :root > main):not(.light, .dark) {
  color-scheme: light dark;
  background: none;
  background-color: light-dark(#eee, #111420);
}
.light {
  color-scheme: light;
}
.dark {
  color-scheme: dark;
}
/* :is(html, body, main):not(.light, .dark) {
  background-color: light-dark(#9ca3af, #111827) !important;
} */
@media (prefers-color-scheme: light) {
  :not(.dark, .dark *) {
    color-scheme: light;
    --tw-bg-opacity: 1 !important;
    /* background-color: rgb(241 245 249 / var(--tw-bg-opacity))!important; */
  }
}
@media (prefers-color-scheme: dark) {
  :not(.light, .light *) {
    color-scheme: dark;
    --tw-bg-opacity: 1 !important;
    /* background-color: rgb(241 245 249 / var(--tw-bg-opacity))!important; */
  }
}

pre, code, kbd {
  font-family: "Operator Mono ScreenSmart", "Operator Mono Lig", "OperatorMono Nerd Font", "Mono Lisa", "DM Mono", "Dank Mono", "IBM Plex Mono", "Fira Code", "Roboto Mono", "Lucida Console", Menlo, Monaco, Consolas, ui-monospace, monospace !important;
  white-space: pre;
  tab-size: 2;
  -moz-tab-size: 2;
  -moz-tab-spaces: 2;
}
pre:is(.hljs, .code-block) {
  position: relative;
  margin: 1px;
  display: flex;
  min-height: calc(100% - 5px);
  font-size: 0.7rem;
  line-height: 1.3rem !important;
  border-bottom-left-radius: 0.75rem;
}
@media (min-width: 768px) {
  pre:is(.hljs, .code-block) {
    font-size: 0.75rem;
    line-height: 1.4rem !important;
  }
}
@media (min-width: 1024px) {
  pre:is(.hljs, .code-block) {
    font-size: 0.875rem;
    line-height: 1.5rem !important;
  }
}
pre:is(.hljs, .code-block) {
  --line-numbers-display: none;
  --line-numbers-tray-display: none;
  --line-numbers-bg-opacity: 0.8;
  /* --line-numbers-bg: rgb(3 7 18 / var(--line-numbers-bg-opacity, 0.8)); */
  --line-numbers-bg: rgb(12 18 34 / var(--line-numbers-bg-opacity));
  --code-padding-left: 0.75rem;
  --line-numbers-backdrop-blur: 12px;
  transform: translate3d(0, 0, 0) translatez(0);

  &...

JavaScript

import * as decorators from "https://esm.sh/v135/[email protected]/X-a24/es2022/decorators.bundle.js";
import * as lithtml from "https://esm.sh/v135/[email protected]/X-a24/es2022/lit-html.bundle.mjs";
import * as lit from "https://esm.sh/[email protected]?bundle&keep-names";
import * as ssr from "https://esm.sh/@lit-labs/ssr?bundle&keep-names";
import _ from "https://esm.sh/[email protected]?bundle";
import { clsx } from "https://esm.sh/v135/@nberlette/[email protected]/X-a24/es2022/clsx.bundle.mjs";

const { customElement, property, query, queryAll } = decorators;
const { css, html, svg, LitElement, ReactiveElement } = lit;

Object.assign(globalThis, decorators, lithtml, lit, {
  lit,
  svg,
  html,
  LitElement,
  ReactiveElement,
  clsx,
  css,
  ssr,
});

export * from "https://esm.sh/v135/[email protected]/X-a24/es2022/decorators.bundle.js";
export * from "https://esm.sh/v135/[email protected]/X-a24/es2022/lit-html.bundle.mjs";
export * from "https://esm.sh/v135/@lit/[email protected]/X-a24/es2022/css-tag.bundle.js";

const toSnakeCase = (s) =>
  s.replace(/(?<=^|[a-z])[A-Z](?=[a-z])/g, (c) => "_" + c.toLowerCase());
const toKebabCase = (s) =>
  s.replace(/(?<=^|[a-z])[A-Z](?=[a-z])/g, (c) => "-" + c.toLowerCase());
const toCamelCase = (s) =>
  s.replace(/^-+/, "").replace(/-([a-z])/g, (m, c) => c.toUpperCase());
const toPascalCase = (s) =>
  s.replace(/(^|-)([a-z])/g, (m, p, c) => c.toUpperCase());
  
function clone(obj) {
    const o = { __proto__: obj.__proto__ };
  
    try {
        const cloned = structuredClone(obj);
        copyFunctions(obj, cloned);
        return cloned;
    } catch (_) {
        return customDeepClone(obj);
    }

    function copyFunctions(src, dest) {
        for (const key in src) {
            if (Object.prototype.hasOwnProperty.call(src, key)) {
                const val = src[key];
                if (typeof val === 'function') {
                    dest[key] = val;
                } else if (val && typeof val === 'object') {
                    if...