Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>My static Space</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> | |
| </head> | |
| <body> | |
| <!-- | |
| Welcome to Tailwind Play, the official Tailwind CSS playground! | |
| Everything here works just like it does when you're running Tailwind locally | |
| with a real build pipeline. You can customize your theme, use features | |
| like `@utility`, or even add third-party plugins using `@plugin`. | |
| Feel free to play with this example if you're just learning, or trash it and | |
| start from scratch if you know enough to be dangerous. Have fun! | |
| --> | |
| <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"> | |
| <div class="col-start-3 row-start-3 flex max-w-lg flex-col bg-gray-100 p-2 dark:bg-white/10"> | |
| <div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300"> | |
| <img src="GEMINIBOT-removebg-preview.png" width="416px" height="234px"/> | |
| <div class="space-y-6"> | |
| <p>An advanced online playground for Tailwind CSS, including support for things like:</p> | |
| <ul class="space-y-3"> | |
| <li class="flex"> | |
| <svg class="h-[1lh] w-5.5 shrink-0" viewBox="0 0 22 22" fill="none" stroke-linecap="square"> | |
| <circle cx="11" cy="11" r="11" class="fill-sky-400/25" /> | |
| <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" /> | |
| <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" /> | |
| </svg> | |
| <p class="ml-3"> | |
| Customizing your theme with | |
| <code class="font-mono font-medium text-gray-950 dark:text-white">@theme</code> | |
| </p> | |
| </li> | |
| <li class="flex"> | |
| <svg class="h-[1lh] w-5.5 shrink-0" viewBox="0 0 22 22" fill="none" stroke-linecap="square"> | |
| <circle cx="11" cy="11" r="11" class="fill-sky-400/25" /> | |
| <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" /> | |
| <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" /> | |
| </svg> | |
| <p class="ml-3"> | |
| Adding custom utilities with | |
| <code class="font-mono font-medium text-gray-950 dark:text-white">@utility</code> | |
| </p> | |
| </li> | |
| <li class="flex"> | |
| <svg class="h-[1lh] w-5.5 shrink-0" viewBox="0 0 22 22" fill="none" stroke-linecap="square"> | |
| <circle cx="11" cy="11" r="11" class="fill-sky-400/25" /> | |
| <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" /> | |
| <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" /> | |
| </svg> | |
| <p class="ml-3"> | |
| Adding custom variants with | |
| <code class="font-mono font-medium text-gray-950 dark:text-white">@variant</code> | |
| </p> | |
| </li> | |
| <li class="flex"> | |
| <svg class="h-[1lh] w-5.5 shrink-0" viewBox="0 0 22 22" fill="none" stroke-linecap="square"> | |
| <circle cx="11" cy="11" r="11" class="fill-sky-400/25" /> | |
| <circle cx="11" cy="11" r="10.5" class="stroke-sky-400/25" /> | |
| <path d="M8 11.5L10.5 14L14 8" class="stroke-sky-800 dark:stroke-sky-300" /> | |
| </svg> | |
| <p class="ml-3">Code completion with instant preview</p> | |
| </li> | |
| </ul> | |
| <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p> | |
| </div> | |
| <hr class="my-6 w-full border-(--pattern-fg)" /> | |
| <p class="mb-3">Want to dig deeper into Tailwind?</p> | |
| <p class="font-semibold"> | |
| <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> | |
| </p> | |
| </div> | |
| </div> | |
| <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> | |
| <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> | |
| <div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg)"></div> | |
| <div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg)"></div> | |
| </div> | |
| </body> | |
| </html> | |