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 > Error -->
<div class="__alert--error
border p-smSpace rounded-md space-x-smSpace" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<div class="ml-3">
<p class="__alert__heading
text-sm font-medium">There were 2 errors with your submission</p>
<div class="__alert__body _alert__body--no_heading
text-sm">
<ul role="list" class="list-disc space-y-1 pl-5">
<li>Your password must be at least 8 characters</li>
<li>Your password must include at least one pro wrestling finishing move</li>
</ul>
</div>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="__alert__button
inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2">
<span class="sr-only">Dismiss</span>
<!-- Heroicon name: mini/x-mark -->
<svg class="h-5 w-5" 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