7 results

Preview
Brutal Code
Thick rules and uppercase
Preview
Chic Code
Serif type and a thin rule
Preview
Code Block
A pre/code pair for a short CSS snippet
Preview
Dense Code
Tight gaps and mono type
Preview
Editorial Code
Measure against a heading
Preview
Modern Code
Red on a short white plane
Preview
Soft Code
Large radii and a pale plane

Code Block

A pre/code pair for a short CSS snippet

Preview

PaletteDarkMonoWarm

HTML

<pre><code>button { color: currentColor; }</code></pre>

CSS

:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}

pre {
  margin: 0;
  padding: 0.9rem 1rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--ink);
  color: var(--paper);
}

code {
  font: 0.9rem/1.5 ui-monospace, monospace;
}

Tailwind

<style>
:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}
</style>
<pre class="m-0 p-[0.9rem_1rem] overflow-auto [border:1px_solid_var(--line)] rounded-[0.7rem] bg-[var(--ink)] text-[var(--paper)]"><code class="[font:0.9rem/1.5_ui-monospace,_monospace]">button { color: currentColor; }</code></pre>