Code Block

Formatted block for code snippets.

function greet(name) {
  return 'Hi, ' + name + '!';
}

html

<div class="codeblock codeblock--javascript" style="--accent:#D9C8F0;border-radius:10px;">
  <div class="codeblock__bar">
    <span class="codeblock__dots" aria-hidden="true"><i></i><i></i><i></i></span>
    <span class="codeblock__lang">javascript</span>
  </div>
  <div class="codeblock__body">
    <span class="codeblock__gutter" aria-hidden="true">1</span>
    <pre class="codeblock__pre"><code>function greet(name) {
  return &#39;Hi, &#39; + name + &#39;!&#39;;
}</code></pre>
  </div>
</div>
<style>
.codeblock { font: 13px/1.6 "SFMono-Regular", Consolas, "Liberation Mono", monospace; background: #241430; color: #FAF7F2; overflow: hidden; max-width: 460px; }
.codeblock__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #ffffff1a; }
.codeblock__dots { display: inline-flex; gap: 5px; }
.codeblock__dots i { width: 8px; height: 8px; border-radius: 50%; background: #ffffff26; display: inline-block; }
.codeblock__lang { margin-left: auto; font: 600 11px system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.codeblock__body { display: flex; }
.codeblock__gutter { padding: 14px 0 14px 14px; color: #ffffff40; user-select: none; }
.codeblock__pre { margin: 0; padding: 14px 16px; overflow-x: auto; white-space: pre; flex: 1; }
</style>

tailwind

<div style="--accent:#D9C8F0;border-radius:10px;" class="codeblock-tw codeblock-tw--javascript font-mono text-[13px] leading-relaxed bg-[#241430] text-[#FAF7F2] overflow-hidden max-w-[460px]">
  <div class="flex items-center gap-2.5 px-3 py-2 border-b border-white/10">
    <span class="inline-flex gap-1.5" aria-hidden="true"><i class="w-2 h-2 rounded-full bg-white/15 inline-block"></i><i class="w-2 h-2 rounded-full bg-white/15 inline-block"></i><i class="w-2 h-2 rounded-full bg-white/15 inline-block"></i></span>
    <span class="ml-auto font-sans text-[11px] font-semibold uppercase tracking-wide" style="color:#D9C8F0">javascript</span>
  </div>
  <div class="flex">
    <span class="py-3.5 pl-3.5 text-white/25 select-none" aria-hidden="true">1</span>
    <pre class="m-0 px-4 py-3.5 overflow-x-auto whitespace-pre flex-1"><code>function greet(name) {
  return &#39;Hi, &#39; + name + &#39;!&#39;;
}</code></pre>
  </div>
</div>

react

export function CodeBlock({
  code = "function greet(name) {
  return 'Hi, ' + name + '!';
}",
  language = "javascript",
  showLineNumbers = true,
  accent = "#D9C8F0",
  radius = 10,
}) {
  return (
    <div style={{ fontFamily: "SFMono-Regular, Consolas, 'Liberation Mono', monospace", fontSize: 13,
      lineHeight: 1.6, background: "#241430", color: "#FAF7F2", overflow: "hidden", maxWidth: 460, borderRadius: radius }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 12px", borderBottom: "1px solid #ffffff1a" }}>
        <span aria-hidden="true" style={{ display: "inline-flex", gap: 5 }}>
          {[0, 1, 2].map((i) => <i key={i} style={{ width: 8, height: 8, borderRadius: "50%", background: "#ffffff26", display: "inline-block" }} />)}
        </span>
        <span style={{ marginLeft: "auto", fontFamily: "system-ui, sans-serif", fontSize: 11, fontWeight: 600,
          letterSpacing: ".04em", textTransform: "uppercase", color: accent }}>{language}</span>
      </div>
      <div style={{ display: "flex" }}>
        {showLineNumbers && <span aria-hidden="true" style={{ padding: "14px 0 14px 14px", color: "#ffffff40", userSelect: "none" }}>1</span>}
        <pre style={{ margin: 0, padding: "14px 16px", overflowX: "auto", whiteSpace: "pre", flex: 1 }}><code>{code}</code></pre>
      </div>
    </div>
  );
}