test

importmap.json

{
  "imports": {
    "voby": "https://esm.sh/voby",
    "oby": "https://esm.sh/oby"
  }
}

main.css

@theme {
  --font-sans: 'Inter', sans-serif;
}

main.tsx

import { render } from 'voby';
import { WelcomeCard } from './second.tsx';

const App = (): JSX.Element => (
  <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">
      <WelcomeCard />
    </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>
);

render(<App />, document.getElementById('app'));

second.tsx

export const WelcomeCard = (): JSX.Element => (
  <div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300">
    <svg xmlns="http://www.w3.org/2000/svg" class="mb-4 w-10 h-10" viewBox="0 0 36 36"><path fill="#ef9645" d="M26.992 19.016a3.5 3.5 0 0 0-.875-.636l-.4-1.356l-8.012-.056l-.307 1.091a3.2 3.2 0 0 0-1.393.718l-3.611-3.954a2.34 2.34 0 0 0-1.389 2.133v.96l-4 4.166l.016 2.188l9.984 10.729s10.518-15.288 10.543-15.258c-.127-.224-.511-.703-.556-.725"/><g fill="#ffdc5d"><path d="M24.581 18H18q-.312 0-.607.061l-.073-.278l-3.273-12.464s-.416-1.957 1.54-2.372c1.956-.416 2.372 1.54 2.372 1.54l3.097 11.569a27 27 0 0 1 1.305.107l2.061-10.512s.188-1.991 2.18-1.804c1.991.188 1.803 2.179 1.803 2.179L26.34 17.187l-.221 1.194A3.4 3.4 0 0 0 24.581 18M8.916 16h.168c1.059 0 1.916.858 1.916 1.917v4.166A1.916 1.916 0 0 1 9.084 24h-.168A1.916 1.916 0 0 1 7 22.083v-4.166C7 16.858 7.857 16 8.916 16m6.918 2.96l-.056.062A2.95 2.95 0 0 0 15 21c0 .063.013.123.018.185c.044.678.308 1.292.728 1.774a2 2 0 0 1-.259.353A1.97 1.97 0 0 1 14 24a2 2 0 0 1-2-2v-6c0-.441.147-.845.389-1.176A2 2 0 0 1 14 14a2 2 0 0 1 2 2v2.778c-.061.055-.109.123-.166.182"/><path d="M9.062 25a2.93 2.93 0 0 0 2.45-1.322c.123.183.271.346.431.497c1.185 1.115 3.034 1.044 4.167-.086c.152-.152.303-.305.419-.488l-.003-.003C16.727 23.713 17 24 18 24h2.537a6.4 6.4 0 0 0-1.024 1c-1.228 1.467-2.013 3.606-2.013 6a.5.5 0 0 0 1 0c0-2.548.956-4.775 2.377-6c.732-.631 1.584-1 2.498-1c.713.079.847-1 .125-1H18a2 2 0 0 1 0-4h8c.858 0 1.66.596 1.913 1.415L29 24c.103.335.479 1.871.411 2.191C29.411 31 24.715 36 19 36c-6.537 0-11.844-5.231-11.986-11.734l.014.01a2.9 2.9 0 0 0 1.91.724z"/></g></svg>
    <div class="space-y-6">
      <p>An advanced online playground for <span class="font-semibold text-sky-400">Voby</span> and Tailwind CSS, including support for:</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">
            Live editing of <code class="font-mono font-medium text-gray-950 dark:text-white">.tsx</code> and <code class="font-mono font-medium text-gray-950 dark:text-white">.css</code> files
          </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">
            Fine-grained reactivity with <code class="font-mono font-medium text-gray-950 dark:text-white">$()</code> and Voby hooks
          </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">
            Instant preview for Voby components
          </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">TypeScript and Tailwind CSS support out of the box</p>
        </li>
      </ul>
      <p>Perfect for learning Voby, prototyping ideas, or sharing interactive demos online.</p>
    </div>
    <hr class="my-6 w-full border-(--pattern-fg)" />
    <p class="mb-3">Want to dig deeper into Voby?</p>
    <p class="font-semibold">
      <a href="https://github.com/vobyjs/voby" class="text-gray-950 underline decoration-sky-400 underline-offset-3 hover:decoration-2 dark:text-white">Read the docs &rarr;</a>
    </p>
  </div>
)