Element

Individual UI object or HTML element.

html

<div class="uif-el-stage" data-highlight="span">
  <div class="uif-el-node uif-el-node--div"><code>&lt;div&gt;</code>
    <span class="uif-el-node uif-el-node--span"><code>&lt;span&gt;</code> Text</span>
    <button type="button" class="uif-el-node uif-el-node--button"><code>&lt;button&gt;</code> Go</button>
  </div>
  <p class="uif-el-caption">Every tag in the tree is an element &mdash; the outlined one is highlighted</p>
</div>
<style>
.uif-el-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430aa; }
.uif-el-node { border: 2px dashed transparent; border-radius: 6px; padding: 8px; display: block; }
.uif-el-node--span, .uif-el-node--button { display: inline-block; margin: 6px 4px 0; }
.uif-el-node code { font-size: 10px; opacity: .6; display: block; margin-bottom: 3px; }
[data-highlight="div"] .uif-el-node--div,
[data-highlight="span"] .uif-el-node--span,
[data-highlight="button"] .uif-el-node--button { border-color: #F5C2E0; background: #24143008; }
.uif-el-caption { margin: 10px 0 0; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]/70" data-highlight="span">
  <div class="tw-el-div block border-2 border-dashed border-transparent rounded-md p-2"><code class="block text-[10px] opacity-60 mb-1">&lt;div&gt;</code>
    <span class="tw-el-span inline-block border-2 border-dashed border-transparent rounded-md p-2 mt-1.5 mr-1"><code class="block text-[10px] opacity-60 mb-1">&lt;span&gt;</code> Text</span>
    <button type="button" class="tw-el-button inline-block border-2 border-dashed border-transparent rounded-md p-2 mt-1.5"><code class="block text-[10px] opacity-60 mb-1">&lt;button&gt;</code> Go</button>
  </div>
  <p class="mt-2.5">Every tag in the tree is an element &mdash; the outlined one is highlighted</p>
</div>
<style>
[data-highlight="div"] .tw-el-div,
[data-highlight="span"] .tw-el-span,
[data-highlight="button"] .tw-el-button { border-color: #F5C2E0; background: #24143008; }
</style>

react

export function Element({
  highlight = "span",
  accent = "#F5C2E0",
  showTags = true,
}) {
  const box = (key) => ({ border: `2px dashed ${highlight === key ? accent : "transparent"}`, background: highlight === key ? "#24143008" : "transparent", borderRadius: 6, padding: 8 });
  const tag = (name) => showTags && <code style={{ fontSize: 10, opacity: .6, display: "block", marginBottom: 3 }}>&lt;{name}&gt;</code>;
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430aa" }}>
      <div style={{ ...box("div"), display: "block" }}>
        {tag("div")}
        <span style={{ ...box("span"), display: "inline-block", margin: "6px 4px 0" }}>{tag("span")} Text</span>
        <button type="button" style={{ ...box("button"), display: "inline-block", margin: "6px 4px 0" }}>{tag("button")} Go</button>
      </div>
      <p style={{ margin: "10px 0 0" }}>Every tag in the tree is an element &mdash; the outlined one is highlighted</p>
    </div>
  );
}