vscode-dummyeditor

by Nicholas Berlette

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.4/tailwind.min.css">
<div
  class="relative w-full col-start-1 lg:col-start-2 col-end-4 row-start-2 row-end-5 py-8 md:px-8 lg:p-0"
>
  <div
    class="relative overflow-hidden md:rounded-xl shadow-2xl flex CodeWindow_root__1fMBP bg-editor EditorTools_code__2nv-U"
  >
    <div class="absolute inset-0 bg-slate-800 bg-opacity-75"></div>
    <div class="relative w-full flex flex-col">
      <div class="flex-none h-11 flex items-center px-4">
        <div class="flex space-x-1.5">
          <div
            class="w-3 h-3 border-2 rounded-full text-red-500 bg-current/0 border-current"
          ></div>
          <div
            class="w-3 h-3 border-2 rounded-full text-amber-400 bg-current/0 border-current"
          ></div>
          <div
            class="w-3 h-3 border-2 rounded-full text-green-400 bg-current/0 border-current"
          ></div>
        </div>
      </div>
      <div
        class="relative border-t border-white border-opacity-10 min-h-0 flex-auto flex flex-col"
      >
        <div class="flex-auto flex min-h-0">
          <div
            class="flex-none w-14 bg-opacity-10 flex flex-col items-center justify-between pt-3.5 pb-4"
          >
            <svg width="24" height="216" fill="none">
              <path
                d="M3 69l6-6m-2-5a7 7 0 1014 0 7 7 0 00-14 0z"
                stroke="#fff"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
                opacity=".5"
              ></path>
              <path
                d="M8 7H5a1 1 0 00-1 1v12a1 1 0 001 1h10a1 1 0 001-1v-3m3.707-10.293l-3.414-3.414A1 1 0 0015.586 3H9a1 1 0 00-1 1v12a1 1 0 001 1h10a1 1 0 001-1V7.414a1 1 0 00-.293-.707zM7 103a2 2 0 100-4 2 2 0 000 4zm0 0v10m10-6a2 2 0 100-4 2 2 0 000 4zm0 0a3 3 0 01-3 3h-4a3 3 0 00-3 3m0 0a2 2 0 100 4 2 2 0 000-4z"
                stroke="#fff"
                stroke-width="1.5"
 ...

Tailwind CSS

:root {
  color-scheme: light dark;
}

html,
body {
  @apply bg-gray-200 dark:bg-gray-900;
}

html {
  font-family:
    Inter var,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
  line-height: 1.5;

  -moz-tab-size: 4;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  font-family: inherit;
  line-height: inherit;

  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji;
}
/*  
.bg-editor {
  @apply bg-slate-100 dark:bg-gray-900;
}
.EditorTools_code__2nv-U {
    height: 39.0625rem;
}
.CodeWindow_root__1fMBP {
    height: 28rem;
    max-height: 60vh;
}
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.shadow, .shadow-2xl {
    box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);
}
.bg-light-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(14,165,233,var(--tw-bg-opacity));
}
.overflow-hidden {
    overflow: hidden;
}
.flex {
    display: flex;
}
.relative {
    position: relative;
}
*, ::after, ::before {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-border-opacity: 1;
    border-color: rgba(229,231,235,var(--tw-border-opacity));
    --tw-shadow: 0 0 transparent;
    --tw-ring-inset: var(--tw-empty, );
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
   ...

TypeScript

_N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
    [73], {
        E09s: function(e, t, a) {
            "use strict";
            a.r(t), t.default = "/_next/static/media/intellisense.0bd2cbf8c277e6c1330e345ab3cd7684.png"
        },
        NtI6: function(e, t, a) {
            "use strict";
            a.r(t), a.d(t, "default", (function() {
                return h
            }));
            var n = a("HALo"),
                i = a("dhJC"),
                s = a("q1tI"),
                o = a.n(s),
                l = a("7ljp"),
                r = a("YFqc"),
                c = a.n(r),
                p = a("tc9R"),
                u = a("vRWG"),
                d = a("I6Nb");
            o.a.createElement;
            const b = {
                    Layout: u.DocumentationLayout,
                    meta: {
                        title: "Editor Support",
                        description: "Plugins and configuration settings that can improve the developer experience when working with Tailwind CSS."
                    },
                    tableOfContents: [{
                        title: "Syntax support",
                        slug: "syntax-support",
                        children: []
                    }, {
                        title: "IntelliSense for VS Code",
                        slug: "intelli-sense-for-vs-code",
                        children: []
                    }, {
                        title: "JetBrains IDEs",
                        slug: "jet-brains-id-es",
                        children: []
                    }]
                },
                m = d.ContentsLayout;

            function h(e) {
                let {
                    components: t
                } = e, s = Object(i.a)(e, ["components"]);
                return Object(l.a)(m, Object(n.a)({}, b, s, {
                    components: t,
                    mdxType: "MDXLayout"
                }), Object(l.a)("div", {
        ...