Spaces:
Running
Running
Update index.html
Browse files- index.html +74 -8
index.html
CHANGED
@@ -7,13 +7,79 @@
|
|
7 |
<link rel="stylesheet" href="style.css" />
|
8 |
</head>
|
9 |
<body>
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
18 |
</body>
|
19 |
</html>
|
|
|
7 |
<link rel="stylesheet" href="style.css" />
|
8 |
</head>
|
9 |
<body>
|
10 |
+
<!--
|
11 |
+
Welcome to Tailwind Play, the official Tailwind CSS playground!
|
12 |
+
|
13 |
+
Everything here works just like it does when you're running Tailwind locally
|
14 |
+
with a real build pipeline. You can customize your theme, use features
|
15 |
+
like `@utility`, or even add third-party plugins using `@plugin`.
|
16 |
+
|
17 |
+
Feel free to play with this example if you're just learning, or trash it and
|
18 |
+
start from scratch if you know enough to be dangerous. Have fun!
|
19 |
+
-->
|
20 |
+
<div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10">
|
21 |
+
<div class="col-start-3 row-start-3 flex max-w-lg flex-col bg-gray-100 p-2 dark:bg-white/10">
|
22 |
+
<div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300">
|
23 |
+
<img src="/img/logo.svg" class="mb-11.5 h-6 dark:hidden" alt="Tailwind Play" />
|
24 |
+
<img src="/img/logo-dark.svg" class="mb-11.5 h-6 not-dark:hidden" alt="Tailwind Play" />
|
25 |
+
<div class="space-y-6">
|
26 |
+
<p>An advanced online playground for Tailwind CSS, including support for things like:</p>
|
27 |
+
<ul class="space-y-3">
|
28 |
+
<li class="flex">
|
29 |
+
<svg class="h-[1lh] w-5.5 shrink-0" viewBox="0 0 22 22" fill="none" stroke-linecap="square">
|
30 |
+
<circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
|
31 |
+
<circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
|
32 |
+
<path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
|
33 |
+
</svg>
|
34 |
+
<p class="ml-3">
|
35 |
+
Customizing your theme with
|
36 |
+
<code class="font-mono font-medium text-gray-950 dark:text-white">@theme</code>
|
37 |
+
</p>
|
38 |
+
</li>
|
39 |
+
<li class="flex">
|
40 |
+
<svg class="h-[1lh] w-5.5 shrink-0" viewBox="0 0 22 22" fill="none" stroke-linecap="square">
|
41 |
+
<circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
|
42 |
+
<circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
|
43 |
+
<path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
|
44 |
+
</svg>
|
45 |
+
<p class="ml-3">
|
46 |
+
Adding custom utilities with
|
47 |
+
<code class="font-mono font-medium text-gray-950 dark:text-white">@utility</code>
|
48 |
+
</p>
|
49 |
+
</li>
|
50 |
+
<li class="flex">
|
51 |
+
<svg class="h-[1lh] w-5.5 shrink-0" viewBox="0 0 22 22" fill="none" stroke-linecap="square">
|
52 |
+
<circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
|
53 |
+
<circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
|
54 |
+
<path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
|
55 |
+
</svg>
|
56 |
+
<p class="ml-3">
|
57 |
+
Adding custom variants with
|
58 |
+
<code class="font-mono font-medium text-gray-950 dark:text-white">@variant</code>
|
59 |
+
</p>
|
60 |
+
</li>
|
61 |
+
<li class="flex">
|
62 |
+
<svg class="h-[1lh] w-5.5 shrink-0" viewBox="0 0 22 22" fill="none" stroke-linecap="square">
|
63 |
+
<circle cx="11" cy="11" r="11" class="fill-sky-400/25" />
|
64 |
+
<circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" />
|
65 |
+
<path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" />
|
66 |
+
</svg>
|
67 |
+
<p class="ml-3">Code completion with instant preview</p>
|
68 |
+
</li>
|
69 |
+
</ul>
|
70 |
+
<p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
|
71 |
+
</div>
|
72 |
+
<hr class="my-6 w-full border-(--pattern-fg)" />
|
73 |
+
<p class="mb-3">Want to dig deeper into Tailwind?</p>
|
74 |
+
<p class="font-semibold">
|
75 |
+
<a href="https://tailwindcss.com/docs" class="text-gray-950 underline decoration-sky-400 underline-offset-3 hover:decoration-2 dark:text-white">Read the docs →</a>
|
76 |
+
</p>
|
77 |
+
</div>
|
78 |
+
</div>
|
79 |
+
<div class="relative -right-px col-start-2 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div>
|
80 |
+
<div class="relative -left-px col-start-4 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div>
|
81 |
+
<div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg)"></div>
|
82 |
+
<div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg)"></div>
|
83 |
+
</div>
|
84 |
</body>
|
85 |
</html>
|