プレビュー
HTML
<p>Check the field</p>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
p {
width: max-content;
margin: 0;
padding: 0.45rem 0.7rem;
border: 1px solid var(--accent);
border-radius: 0.5rem;
background: var(--chip);
color: var(--ink);
font-weight: 700;
animation: shake 0.55s ease-in-out infinite;
}
@keyframes shake {
25% { transform: translateX(-0.22rem); }
75% { transform: translateX(0.22rem); }
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
p {
animation: shake 0.55s ease-in-out infinite;
}
@keyframes shake {
25% { transform: translateX(-0.22rem); }
75% { transform: translateX(0.22rem); }
}
</style>
<p class="w-[max-content] m-0 p-[0.45rem_0.7rem] [border:1px_solid_var(--accent)] rounded-[0.5rem] bg-[var(--chip)] text-[var(--ink)] font-bold">Check the field</p>