codesnap.html

<div
  class="[--or-200]-purple-500 [--or-500]-orange-500 p-3rem bg-[linear-gradient(125deg,_rgb(var(--or-200)),_rgb(var(--or-500)))] br-1rem family-code text-neutral-50 flex w-mn-450px w-min-content"
>
  <div class="w-full br-1rem p-2rem bg-[rgb(0_0_0_/_0.6)] bdr-[2px_solid_#cccccc50]">
    <div class="w-full relative center">
      <div class="text-neutral-200 fw-500">index.ts</div>
      <div class="center gap-8px absolute l-0" child="(div): box-16px br-100%;">
        <div class="bgc-green-500"></div>
        <div class="bgc-yellow-500"></div>
        <div class="bgc-red-500"></div>
      </div>
    </div>
    <div class="flex mt-2rem gap-2ch p-1ch lh-1.7">
      <div class="fs-16px text-neutral-300 ta-right">
        <p>1</p>
        <p>2</p>
        <p>11</p>
      </div>
      <div class="fs-16px text-neutral-200 flex flex-d-column">
        <p class="tw-nowrap italic text-neutral-500">// TenoxUI is a great css framework</p>
        <p class="tw-nowrap">
          <span class="text-orange-500">console</span>.<span class="text-blue-500">log</span>(<span
            class="text-green-500"
            >"Hello World!"</span
          >)
        </p>
        <p class="tw-nowrap">
          <span class="text-orange-400">console</span>.<span class="text-blue-400">log</span>(<span
            class="text-green-400"
            >"Hello World!"</span
          >)
        </p>
      </div>
    </div>
  </div>
</div>