An alert should sit at the top of the page or inside the main content container.
To modify an alert the tailwind classes on the parent div adds the base styling of an alert.
To modify an alert swap out the below classes to get your desired colour from tailwind.config.js
<!-- Alert > Warning -->
<div class="alert alert--warning" role="alert">
<div class="alert__wrapper">
<div class="alert__left">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="alert__icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</svg>
</div>
<div class="alert__center">
<p class="alert__heading alert__heading--warning">Attention needed</p>
<p class="alert__body alert__body--warning">Please check the details for more information ...</p>
</div>
<div class="alert__right">
<div class="alert__button_wrapper">
<button type="button" class="alert__button alert__button--warning">
<span class="alert__dismiss">Dismiss</span>
<!-- Heroicon name: mini/x-mark -->
<svg class="alert__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
</div>
.alert {
@apply border p-smSpace rounded-md space-x-smSpace;
&--info {
@apply border-info-500 bg-info-100 text-info-500;
}
&--success {
@apply border-success-500 bg-success-100 text-success-500;
}
&--warning {
@apply border-warning-500 bg-warning-100 text-warning-500;
}
&__wrapper {
@apply flex;
}
&__left {
@apply flex-shrink-0;
}
&__icon {
@apply w-6 h-6;
}
&__center {
@apply ml-3;
&--info {
@apply flex-1 md:flex md:justify-between;
}
}
&__heading {
@apply text-sm font-medium;
&--info {
@apply text-info-800;
}
&--success {
@apply text-success-800;
}
&--warning {
@apply text-warning-800;
}
}
&__body {
@apply mt-2 text-sm;
&--no_heading {
@apply mt-0;
}
&--info {
@apply text-info-700;
}
&--success {
@apply text-success-700;
}
&--warning {
@apply text-warning-700;
}
}
&__list {
@apply list-disc space-y-1 pl-5;
}
&__right {
@apply ml-auto pl-3;
}
&__button_wrapper {
@apply -mx-1.5 -my-1.5;
}
&__details_wrapper {
@apply mt-3 text-sm md:ml-6 md:mt-0;
}
&__details {
@apply whitespace-nowrap font-medium text-info-700 hover:text-info-600;
}
&__button {
@apply inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2;
&--info {
@apply bg-info-100 text-info-500 hover:bg-info-100 focus:ring-info-600 focus:ring-offset-info-50;
}
&--success {
@apply bg-success-100 text-success-500 hover:bg-success-100 focus:ring-success-600 focus:ring-offset-success-50;
}
&--warning {
@apply bg-warning-100 text-warning-500 hover:bg-warning-100 focus:ring-warning-600 focus:ring-offset-warning-50;
}
}
&__dismiss {
@apply sr-only;
}
&__close {
@apply h-5 w-5;
}
}
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJUMg9qwWNHgaiuoDoEgHkn%2Ffractal.dcodegroup.com%3Fnode-id%3D80%253A6512%26t%3DdVycvZF0V0W4lyYO-1