An unnamed playground on Frontend.fyi

Flaky Responsive Breakpoint PRO

1
:root {
2
  --background-color: #131018;
3
  --text-color: #fff;
4

5
  background-color: var(--background-color);
6
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
7
}
8

9
.wrapper {
10
  display: grid;
11
  place-items: center;
12
  min-height: 100dvh;
13
  color: var(--text-color);
14
}
15

16
.content {
17
  display: flex;
18
  flex-direction: column;
19
  align-items: center;
20
}
21

22
.logo {
23
  margin-bottom: 1rem;
24
  height: 3rem;
25
  width: 3rem;
26
}
27

28
.title {
29
  margin-bottom: 1rem;
30
  max-width: 60%;
31
  text-align: center;
32
  font-size: 2rem;
33
  text-wrap: balance;
34
}
35

36
.cta {
37
  font-size: 0.875rem;
38
  text-transform: uppercase;
39
  color: var(--text-color);
40
}

1
import './styles.css';
2

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

1
<div class="wrapper">
2
  <div class="content">
3
    <img
4
      class="logo"
5
      src="https://sandpack.frontend.fyi/img/fefyi.svg"
6
    />
7
    <h1 class="title">
8
      Time to draw some rectangles
9
    </h1>
10
    <a
11
      href="https://www.frontend.fyi/playgrounds"
12
      target="_blank"
13
      class="cta"
14
    >
15
      Frontend.fyi Playgrounds
16
    </a>
17
  </div>
18
</div>
19

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

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
}