VSCode Mockup Windows

Visual Studio Code style mockup editor windows, based on the GitHub Copilot official website.

by Nicholas Berlette

HTML

<div class="min-h-screen min-w-screen">
  <article>
    <section aria-label="More than autocomplete">
      <div class="container-xl mx-auto p-responsive pb-12 lg:py-24">
        <div>
          <div>
            <div class="text-center">
              <h2 id="more-than-autocomplete" class="relative  mt-4 mb-4 font-extrabold gloss-u-typescale-800 tracking-[-0.03em]"><span role="text">More than
                  <!-- --> <span class="whitespace-nowrap">au<span class="InteractiveCodeExample_cursorBlinking__27rTy absolute w-1 h-[1.1em] mt-1 -mr-1 bg-gray-800 z-10"></span><span class="text-gloss-gray-300" style="background-color:#0cf2;display:inline-block;margin-top:4px;padding:0 0 2px 0">tocomplete</span></span></span></h2>
            </div>
            <div>
              <p class="!max-w-[58em] !mx-auto text-center gloss-u-typescale-400 text-[#6A737D] cursor-default">GitHub Copilot is powered by Codex, the new AI system created by OpenAI.</p>
            </div>
          </div>
          <!-- dark visual studio code window -->
					<div class="max-w-[60em] mx-auto mt-8 mb-20 vscode-window-dark" style="user-select: none; user-drag: none;">
            <div class="relative w-full mb-20">
              <div class="flex-col bg-hljs-background text-hljs-foreground rounded-window syntax-dark border shadow-dark" style="border:1px solid var(--border)">
                <div class="w-full flex items-center bg-offset p-3 py-3">
                  <div class="flex space-x-[5px]">
                    <div class="h-[11px] w-[11px] rounded-full bg-[#FF605C]"></div>
                    <div class="h-[11px] w-[11px] rounded-full bg-[#FFBD44]"></div>
                    <div class="h-[11px] w-[11px] rounded-full bg-[#00CA4E]"></div>
                  </div>
                  <div class="flex-1 text-center text-xs leading-1 -mt-1 -mb-1" style="font-family:sans-serif;cursor:default;margin-left:-60px;">Visual Studio Code</div>
                </div>
                <div class="flex...

Tailwind CSS

@import "https://unpkg.com/open-props";

html,
body {
  @apply !bg-slate-900;
}

.cursor-default {
  cursor: default;
}
.vscode-window-dark {
}
.InteractiveCodeExample_Code__1hCWW {
  color: var(--base05);
}

.InteractiveCodeExample_Code__1hCWW ::-moz-selection,
.InteractiveCodeExample_Code__1hCWW ::selection {
  background: transparent !important;
}

.InteractiveCodeExample_Code__1hCWW .hljs-comment {
  color: var(--base03);
}

.InteractiveCodeExample_Code__1hCWW .hljs-tag {
  color: var(--base04);
}

.InteractiveCodeExample_Code__1hCWW .hljs-operator,
.InteractiveCodeExample_Code__1hCWW .hljs-punctuation,
.InteractiveCodeExample_Code__1hCWW .hljs-subst {
  color: var(--base05);
}

.InteractiveCodeExample_Code__1hCWW .hljs-operator {
  opacity: 0.7;
}

.InteractiveCodeExample_Code__1hCWW .hljs-bullet,
.InteractiveCodeExample_Code__1hCWW .hljs-deletion,
.InteractiveCodeExample_Code__1hCWW .hljs-name,
.InteractiveCodeExample_Code__1hCWW .hljs-selector-tag,
.InteractiveCodeExample_Code__1hCWW .hljs-template-variable,
.InteractiveCodeExample_Code__1hCWW .hljs-variable {
  color: var(--base08);
}

.InteractiveCodeExample_Code__1hCWW .hljs-attr,
.InteractiveCodeExample_Code__1hCWW .hljs-link,
.InteractiveCodeExample_Code__1hCWW .hljs-literal,
.InteractiveCodeExample_Code__1hCWW .hljs-number,
.InteractiveCodeExample_Code__1hCWW .hljs-symbol,
.InteractiveCodeExample_Code__1hCWW .hljs-variable.constant_ {
  color: var(--base09);
}

.InteractiveCodeExample_Code__1hCWW .hljs-class .hljs-title,
.InteractiveCodeExample_Code__1hCWW .hljs-title,
.InteractiveCodeExample_Code__1hCWW .hljs-title.class_ {
  color: var(--base0A);
}

.InteractiveCodeExample_Code__1hCWW .hljs-strong {
  font-weight: 700;
  color: var(--base0A);
}

.InteractiveCodeExample_Code__1hCWW .hljs-addition,
.InteractiveCodeExample_Code__1hCWW .hljs-code,
.InteractiveCodeExample_Code__1hCWW .hljs-string,
.InteractiveCodeExample_Code__1hCWW .hljs-title.class_.inherited__ {
  color:...