memex-in commited on
Commit
1055bde
·
verified ·
1 Parent(s): cf6b83b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +74 -8
index.html CHANGED
@@ -7,13 +7,79 @@
7
  <link rel="stylesheet" href="style.css" />
8
  </head>
9
  <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 &rarr;</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>