Luc93

I'd imagine a reusable React component something like:

<Alert type="danger"> Are you sure? </Alert>

Of course this solution would work in other templating engines as well.

The alternative would be extracting css components:

.alert { @apply px-4 py-3 ... }

.alert-danger { @apply bg-red-100 .. }

"[...] you have to individually fix every heading on every page."

You should have utilized a template engine in the first place. So you'd only have to change the layout/partial/component that is responsible for rendering the heading. Moreover, you could also have extracted the component with css by creating a .title class and using @apply.