CSS

Cascading Style Sheets.

.box {
  background: #A8E6C1;
  color: #241430;
  border-radius: 12px;
}

html

<div class="css-wrap" role="img" aria-label="A CSS rule shown as code, applied or not applied to a matching element below">
  <pre class="css-code">.box {
  background: #A8E6C1;
  color: #241430;
  border-radius: 12px;
}</pre>
  <div class="css-box css-box--styled" style="background:#A8E6C1;color:#241430;border-radius:12px;">.box</div>
  <p class="css-caption">Rule applied — .box now matches the declarations above.</p>
</div>
<style>
.css-wrap { font: 14px/1.5 system-ui, sans-serif; color: #241430; width: 300px; }
.css-code { background: #241430; color: #FAF7F2; padding: 12px; border-radius: 8px; font: 12px/1.6 ui-monospace, monospace; white-space: pre-wrap; margin: 0 0 16px; }
.css-box { padding: 16px; border: 1.5px dashed #24143055; font-weight: 600; text-align: center; }
.css-box--styled { border-style: solid; }
.css-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[300px]" role="img" aria-label="A CSS rule shown as code, applied or not applied to a matching element below">
  <pre class="bg-[#241430] text-[#FAF7F2] p-3 rounded-lg text-xs leading-relaxed whitespace-pre-wrap m-0 mb-4">.box {
  background: #A8E6C1;
  color: #241430;
  border-radius: 12px;
}</pre>
  <div class="p-4 border-[1.5px] font-semibold text-center border-solid" style="background:#A8E6C1;color:#241430;border-radius:12px;">.box</div>
  <p class="mt-3 text-xs text-[#241430]/80">Rule applied — .box now matches the declarations above.</p>
</div>

react

export function CssRule({
  background = "#A8E6C1",
  textColor = "#241430",
  radius = 12,
  applied = true,
}) {
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", width: 300 }}
      role="img" aria-label="A CSS rule shown as code, applied or not applied to a matching element below">
      <pre style={{ background: "#241430", color: "#FAF7F2", padding: 12, borderRadius: 8,
        font: "12px/1.6 ui-monospace, monospace", whiteSpace: "pre-wrap", margin: "0 0 16px" }}>
{`.box {\n  background: ${background};\n  color: ${textColor};\n  border-radius: ${radius}px;\n}`}
      </pre>
      <div style={{ padding: 16, fontWeight: 600, textAlign: "center",
        border: applied ? "1.5px solid #24143055" : "1.5px dashed #24143055",
        ...(applied ? { background, color: textColor, borderRadius: radius } : {}) }}>
        .box
      </div>
      <p style={{ margin: "12px 0 0", fontSize: 12, color: "#241430cc" }}>
        {applied ? "Rule applied — .box now matches the declarations above." : "Rule not applied — .box keeps the browser's default look."}
      </p>
    </div>
  );
}