Alerts

Simple, colorful boxes that grab the user's attention.

Filled

The basic alert type

<table class="w-full">
  <tr>
    <td class="bg-blue-500 text-white py-16 px-32">
      This is an alert with background colour
    </td>
  </tr>
</table>

Outlined

This one has a 2px border.

<table class="w-full border-2 border-solid border-blue-500">
  <tr>
    <td class="text-blue-500 text-lg py-16 px-32">
      This is an alert with an outline border
    </td>
  </tr>
</table>

Announcement

A two column table with a button.

<table class="w-full">
  <tr>
    <td class="bg-blue-500 text-white rounded py-16 px-32">
      <table class="w-full">
        <tr>
          <th class="text-lg w-8/12 inline-block sm:w-full sm:pb-4 text-left sm:text-center">
            📢 We have some big news for you!
          </th>
          <th class="w-4/12 inline-block sm:w-full">
            <table class="sm:mx-auto">
              <tr>
                <th class="bg-white hover:bg-blue-50 text-center rounded" style="mso-padding-alt: 12px 48px;">
                  <a href="" class="w-full text-blue-500 text-sm leading-full no-underline py-12 px-48">Learn more</a>
                </th>
              </tr>
            </table>
          </th>
        </tr>
      </table>
    </td>
  </tr>
</table>