プレビュー
HTML
<section><h1>Chic</h1></section>
CSS
:root {
--ink: #3f382f;
--paper: #f7f1e6;
--accent: #8d6a3e;
--accent-2: #5a5148;
--on-accent: #fff8ee;
--muted: #8a7f72;
--line: #d8cbb8;
--chip: #efe6d4;
}
section {
display: grid;
place-items: center;
min-width: min(100%, 18rem);
min-height: 10rem;
border-radius: 0;
background-color: var(--paper);
background-image: repeating-linear-gradient(
-45deg,
var(--chip) 0 10px,
transparent 10px 20px
);
color: var(--ink);
font-family: Palatino, Georgia, serif;
}
h1 {
margin: 0;
padding: 0.3rem 0.6rem;
background: var(--paper);
font-size: 1.15rem;
letter-spacing: 0.08em;
text-transform: none;
}
Tailwind
<style>
:root {
--ink: #3f382f;
--paper: #f7f1e6;
--accent: #8d6a3e;
--accent-2: #5a5148;
--on-accent: #fff8ee;
--muted: #8a7f72;
--line: #d8cbb8;
--chip: #efe6d4;
}
section {
background-image: repeating-linear-gradient(
-45deg,
var(--chip) 0 10px,
transparent 10px 20px
);
}
</style>
<section class="grid place-items-center min-w-[min(100%,_18rem)] min-h-[10rem] rounded-[0] bg-[var(--paper)] text-[var(--ink)] font-[Palatino,_Georgia,_serif]"><h1 class="m-0 p-[0.3rem_0.6rem] bg-[var(--paper)] text-[1.15rem] tracking-[0.08em] normal-case">Chic</h1></section>