プレビュー
HTML
<aside>
<p>Keep this line.</p>
</aside>
CSS
:root {
--ink: #2c2414;
--paper: #fbf6e8;
--accent: #b8892a;
--accent-2: #4a3d22;
--on-accent: #fffaf0;
--muted: #7a6b48;
--line: #e4d5a8;
--chip: #f3e8c6;
}
aside {
position: relative;
width: min(100%, 14rem);
margin-top: 0.7rem;
padding: 0.9rem 0.85rem 0.7rem;
background: var(--chip);
color: var(--ink);
font-family: Palatino, Georgia, serif;
}
aside::before {
content: "";
position: absolute;
top: -0.45rem;
left: 1rem;
width: 2.4rem;
height: 0.7rem;
background: color-mix(in srgb, var(--accent) 55%, transparent);
}
p { margin: 0; }
Tailwind
<style>
:root {
--ink: #2c2414;
--paper: #fbf6e8;
--accent: #b8892a;
--accent-2: #4a3d22;
--on-accent: #fffaf0;
--muted: #7a6b48;
--line: #e4d5a8;
--chip: #f3e8c6;
}
aside::before {
content: "";
position: absolute;
top: -0.45rem;
left: 1rem;
width: 2.4rem;
height: 0.7rem;
background: color-mix(in srgb, var(--accent) 55%, transparent);
}
</style>
<aside class="relative w-[min(100%,_14rem)] mt-[0.7rem] p-[0.9rem_0.85rem_0.7rem] bg-[var(--chip)] text-[var(--ink)] font-[Palatino,_Georgia,_serif]">
<p class="m-0">Keep this line.</p>
</aside>