プレビュー
HTML
<article>
<p>Centered note</p>
</article>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
article {
position: relative;
min-height: 8.5rem;
border: 1px dashed var(--line);
border-radius: 1rem;
background: var(--chip);
}
p {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0.7rem 0.95rem;
border: 1px solid var(--line);
border-radius: 0.7rem;
background: var(--paper);
color: var(--ink);
font-weight: 700;
transform: translate(-50%, -50%);
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
p {
transform: translate(-50%, -50%);
}
</style>
<article class="relative min-h-[8.5rem] [border:1px_dashed_var(--line)] rounded-[1rem] bg-[var(--chip)]">
<p class="absolute top-[50%] left-[50%] m-0 p-[0.7rem_0.95rem] [border:1px_solid_var(--line)] rounded-[0.7rem] bg-[var(--paper)] text-[var(--ink)] font-bold">Centered note</p>
</article>