プレビュー
HTML
<section><h1>Caution</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: repeating-linear-gradient(
-45deg,
var(--ink) 0 12px,
var(--accent) 12px 24px
);
color: var(--on-accent);
}
h1 { margin: 0; background: var(--ink); padding: 0.3rem 0.6rem; }
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
</style>
<section class="grid place-items-center min-w-[min(100%,_18rem)] min-h-[10rem] rounded-[1.1rem] bg-[repeating-linear-gradient(_-45deg,_var(--ink)_0_12px,_var(--accent)_12px_24px_)] text-[var(--on-accent)]"><h1 class="m-0 bg-[var(--ink)] p-[0.3rem_0.6rem]">Caution</h1></section>