An unnamed playground on Frontend.fyi

Jeroen Reumkens PRO

1
<div class="grid min-h-dvh place-items-center text-white">
2
  <div class="flex flex-col items-center">
3
    <img
4
      class="mb-8 h-12 w-12"
5
      src="https://sandpack.frontend.fyi/img/fefyi.svg"
6
    />
7
    <h1
8
      class="mb-6 max-w-[60%] text-balance text-center font-mono text-3xl text-white"
9
    >
10
      Frontend.fyi Playgrounds
11
    </h1>
12
    <a
13
      href="https://www.frontend.fyi/playgrounds"
14
      target="_blank"
15
      class="text-sm uppercase text-white bg-primary rounded-md px-2 py-1"
16
    >
17
      Frontend.fyi Playgrounds
18
    </a>
19
  </div>
20
</div>
21

22
<script src="index.js"></script>

1
@theme {
2
  --color-primary: #7f22fe;
3
  --color-background: #1b1917;
4
}
5

6
@layer base {
7
  :root {
8
    background-color: var(--color-background);
9
    background-image: url('https://sandpack.frontend.fyi/blueprint-assets/dots.svg');
10
    background-repeat: repeat;
11
  }
12
}

1
import './styles.css';
2

3
console.log('Hello World!');

1
<html>
2
<head></head>
3
<body>
4
<script type="importmap">
5
{
6
  "imports": {}
7
}
8
</script>
9
</body>
10
</html>

1
{
2
  "compilerOptions": {
3
    "target": "ES2020",
4
    "module": "ESNext",
5
    "moduleResolution": "node",
6
    "lib": [
7
      "ES2020",
8
      "DOM",
9
      "DOM.Iterable"
10
    ],
11
    "skipLibCheck": true,
12
    "strict": false,
13
    "esModuleInterop": true,
14
    "allowSyntheticDefaultImports": true,
15
    "forceConsistentCasingInFileNames": true,
16
    "resolveJsonModule": true
17
  }
18
}