プレビュー
HTML
<section><h1>Carbon</h1></section>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
section {
display: grid;
place-items: center;
min-width: min(100%, 18rem);
min-height: 10rem;
border-radius: 1.1rem;
background-color: var(--ink);
background-image:
linear-gradient(rgb(from var(--paper) r g b / 8%) 1px, transparent 1px),
linear-gradient(90deg, rgb(from var(--paper) r g b / 8%) 1px, transparent 1px);
background-size: 10px 10px;
color: var(--on-accent);
}
h1 { margin: 0; }
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
section {
background-image: linear-gradient(rgb(from var(--paper) r g b / 8%) 1px, transparent 1px),
linear-gradient(90deg, rgb(from var(--paper) r g b / 8%) 1px, transparent 1px);
background-size: 10px 10px;
}
</style>
<section class="grid place-items-center min-w-[min(100%,_18rem)] min-h-[10rem] rounded-[1.1rem] bg-[var(--ink)] text-[var(--on-accent)]"><h1 class="m-0">Carbon</h1></section>