<.alert id="alert-single-info">
  <.icon name="hero-exclamation-circle" />
  12 unread messages. Tap to see.
</.alert>

<.alert color="info" id="alert-single-info-color">
  <.icon name="hero-exclamation-circle" />
  12 unread messages. Tap to see.
</.alert>

<.alert color="success" id="alert-single-success-color">
  <.icon name="hero-exclamation-circle" />
  12 unread messages. Tap to see.
</.alert>

<.alert color="warning" id="alert-single-warning-color">
  <.icon name="hero-exclamation-circle" />
  12 unread messages. Tap to see.
</.alert>

<.alert color="error" id="alert-single-error-color">
  <.icon name="hero-exclamation-circle" />
  12 unread messages. Tap to see.
</.alert>

<.alert id="alert-single-alert-with-buttons">
  <.icon name="hero-exclamation-circle" />
  <span>we use cookies for no reason.</span>
  <div>
    <.button size="sm">Deny</.button>
    <.button color="primary" size="sm">Accept</.button>
  </div>
</.alert>

<.alert id="alert-single-alert-with-title-and-description">
  <.icon name="hero-exclamation-circle" />
  <div>
    <h3 class="font-bold">New message!</h3>
    <div class="text-xs">You have 1 unread message</div>
  </div>
  <.button size="sm">See</.button>
</.alert>