Parent Component

Component containing another component.

Parent — owns count=42
Childcount=42
Childcount=42
Childcount=42

html

<div class="parentc" data-count="2">
  <div class="parentc__box" style="border-color:#A8E6C1;">Parent &mdash; owns count=42</div>
  <div class="parentc__children">
    <div class="parentc__child" style="background:#A8E6C1;">Child<small>count=42</small></div>
    <div class="parentc__child" style="background:#A8E6C1;">Child<small>count=42</small></div>
    <div class="parentc__child" style="background:#A8E6C1;">Child<small>count=42</small></div>
  </div>
</div>
<style>
.parentc { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.parentc__box { border: 2px dashed; border-radius: 8px; padding: 10px; font-weight: 700; text-align: center; margin-bottom: 12px; }
.parentc__children { display: flex; gap: 8px; }
.parentc__child { flex: 1; border-radius: 8px; padding: 10px; text-align: center; font-weight: 700; box-sizing: border-box; }
.parentc__child small { display: block; font-weight: 400; font-size: 10px; margin-top: 3px; }
.parentc[data-count="1"] .parentc__child:nth-child(n+2) { display: none; }
.parentc[data-count="2"] .parentc__child:nth-child(n+3) { display: none; }
</style>

tailwind

<div class="parentctw parentctw--2 font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <div class="border-2 border-dashed rounded-lg p-2.5 font-bold text-center mb-3" style="border-color:#A8E6C1;">Parent &mdash; owns count=42</div>
  <div class="flex gap-2">
    <div class="parentctw__child flex-1 rounded-lg p-2.5 text-center font-bold box-border" style="background:#A8E6C1;">Child<small class="block font-normal text-[10px] mt-1">count=42</small></div>
    <div class="parentctw__child flex-1 rounded-lg p-2.5 text-center font-bold box-border" style="background:#A8E6C1;">Child<small class="block font-normal text-[10px] mt-1">count=42</small></div>
    <div class="parentctw__child flex-1 rounded-lg p-2.5 text-center font-bold box-border" style="background:#A8E6C1;">Child<small class="block font-normal text-[10px] mt-1">count=42</small></div>
  </div>
</div>
<style>
.parentctw--1 .parentctw__child:nth-child(n+2) { display: none; }
.parentctw--2 .parentctw__child:nth-child(n+3) { display: none; }
</style>

react

export function ParentComponent({
  propName = "count",
  stateValue = "42",
  childCount = "2",
  accent = "#A8E6C1",
}) {
  const n = Number(childCount);
  const children = [0, 1, 2].filter((i) => i < n);
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <div style={{ border: `2px dashed ${accent}`, borderRadius: 8, padding: 10, fontWeight: 700, textAlign: "center", marginBottom: 12 }}>Parent &mdash; owns {propName}={stateValue}</div>
      <div style={{ display: "flex", gap: 8 }}>
        {children.map((i) => (
          <div key={i} style={{ flex: 1, borderRadius: 8, padding: 10, textAlign: "center", fontWeight: 700, boxSizing: "border-box", background: accent }}>
            Child
            <small style={{ display: "block", fontWeight: 400, fontSize: 10, marginTop: 3 }}>{propName}={stateValue}</small>
          </div>
        ))}
      </div>
    </div>
  );
}