callout-box.html html

<callout-box>This is an informational message.</callout-box>
<callout-box class="tip">Remember to hydrate while coding!</callout-box>
<callout-box class="caution">Be careful with this operation.</callout-box>
<callout-box class="danger">This action is irreversible!</callout-box>
<callout-box class="note">This is just a side note.</callout-box>

callout-box.css css

callout-box {
	display: block;
	position: relative;
	padding: var(--space-s) var(--space-s) var(--space-s) var(--space-xl);
	margin: 0 0 var(--space-l);
	font-size: var(--font-size-m);
	line-height: var(--line-height-l);
	background: #a5bbf1;
	border-left: var(--space-xxs) solid #4f7cfd;
	border-radius: var(--space-xs);

	&::before {
		position: absolute;
		content: 'ℹ️';
		left: var(--space-s);
	}

	> *:last-child {
		margin-bottom: 0;
	}

	&.tip {
		background: #aaca95;
        border-color: #5d9934;

		&::before {
			content: '💡';
		}
	}

	&.note {
		background: var(--color-gray-20);
        border-color: var(--color-gray-40);

		&::before {
			content: '💬';
		}
	}

	&.caution {
		background: var(--color-gray-20);
        border-color: var(--color-gray-40);

		&::before {
			content: '⚠️';
		}
	}

	&.danger {
		background: #fdab92;
        border-color: #e55a32;

		&::before {
			content: '🚨';
		}
	}
}

@media (prefers-color-scheme: dark) {

	callout-box {
		background: #18338f;
        border-color: #325df1;

		&.tip {
            background: #234905;
            border-color: #417f11;
        }

		&.note {
            background: var(--color-gray-80);
            border-color: var(--color-gray-60);
        }

		&.caution {
            background: var(--color-gray-80);
            border-color: var(--color-gray-60);
        }

		&.danger {
            background: #792109;
            border-color: #c83c15;
        }
	}
}