Child Component

Component nested inside another.

html

<div class="childc" style="border-color:#BFD9F2;">
  <span class="childc__tag">Panel</span>
  <div class="childc__nest" style="border-color:#BFD9F2;">
    <span class="childc__tag childc__tag--child" style="background:#BFD9F2;">Icon</span>
    
  </div>
</div>
<style>
.childc { font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 10px; width: 280px; box-sizing: border-box; border: 2px dashed; position: relative; }
.childc__tag { position: absolute; top: -9px; left: 10px; background: #FAF7F2; padding: 0 6px; font-weight: 700; }
.childc__nest { margin-top: 12px; border: 2px solid; border-radius: 8px; padding: 20px 14px 14px; position: relative; min-height: 40px; }
.childc__tag--child { position: absolute; top: -9px; left: 10px; color: #241430; border-radius: 4px; }
.childc__nest--deep { margin-top: 10px; border: 2px dotted #24143060; background: #24143008; }
.childc__tag--grandchild { position: absolute; top: -9px; left: 10px; background: #FAF7F2; color: #24143099; }
</style>

tailwind

<div class="font-sans text-xs text-[#241430] bg-[#FAF7F2] p-4.5 rounded-[10px] w-[280px] box-border border-2 border-dashed relative" style="border-color:#BFD9F2;">
  <span class="absolute -top-[9px] left-2.5 bg-[#FAF7F2] px-1.5 font-bold">Panel</span>
  <div class="mt-3 border-2 rounded-lg py-3.5 px-3.5 pt-5 relative min-h-[40px]" style="border-color:#BFD9F2;">
    <span class="absolute -top-[9px] left-2.5 rounded text-[#241430] px-1.5" style="background:#BFD9F2;">Icon</span>
    
  </div>
</div>

react

export function ChildComponent({
  parentLabel = "Panel",
  childLabel = "Icon",
  grandchild = false,
  accent = "#BFD9F2",
}) {
  return (
    <div style={{ font: "12px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 10, width: 280, boxSizing: "border-box", border: `2px dashed ${accent}`, position: "relative" }}>
      <span style={{ position: "absolute", top: -9, left: 10, background: "#FAF7F2", padding: "0 6px", fontWeight: 700 }}>{parentLabel}</span>
      <div style={{ marginTop: 12, border: `2px solid ${accent}`, borderRadius: 8, padding: "20px 14px 14px", position: "relative", minHeight: 40 }}>
        <span style={{ position: "absolute", top: -9, left: 10, background: accent, color: "#241430", borderRadius: 4, padding: "0 6px" }}>{childLabel}</span>
        {grandchild && (
          <div style={{ marginTop: 10, border: "2px dotted #24143060", background: "#24143008", borderRadius: 8, padding: "20px 14px 14px", position: "relative" }}>
            <span style={{ position: "absolute", top: -9, left: 10, background: "#FAF7F2", color: "#24143099", padding: "0 6px" }}>Label</span>
          </div>
        )}
      </div>
    </div>
  );
}