> For the complete documentation index, see [llms.txt](https://j-hiz.gitbook.io/tailwindtemplates/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://j-hiz.gitbook.io/tailwindtemplates/alerts.md).

# Alerts

## Alert

### Simple accent with icon

![](https://3677920472-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBql1s3wlqs4NUfqqiL%2F-LBqmrdj2QGBd1chnk8G%2F-LBqnVHSpfWXZfWJ1nal%2FSimple%20%20accent.PNG?alt=media\&token=fbae5245-c6fc-44ef-8303-8ec4ffc4d1cc)

```markup
<div class="shadow" role="alert">
    <div class="flex">
      <div class="bg-blue w-1/6 text-center p-2">
        <div class="flex justify-center h-full items-center">
          <i class="material-icons text-white">info_outline</i>
        </div>
      </div>
      <div class="bg-white border-r-4 border-blue-light w-full p-4">
        <div>
          <p class="text-grey-dark font-bold">Information box</p>
          <p class="text-grey-dark">Your message has been send to Jack</p>
        </div>
      </div>
    </div>
  </div>
```

### Rounded

![](https://3677920472-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBql1s3wlqs4NUfqqiL%2F-LBqq8UOc22xENk4hm-j%2F-LBqxhqhyIBzg7IyGb1C%2FRounded.PNG?alt=media\&token=5673260f-4b2d-440b-8077-e759337f4122)

```markup
<div class="shadow bg-white rounded-full" role="alert">
    <div class="p-4 flex">
        <div class="w-1/5 bg-green flex items-center text-white rounded-full justify-center">
            <i class="material-icons">call</i>
        </div>
        <div class="pl-2 text-grey-dark">
            <p class="font-bold">Outgoing call</p>
            <p>Calling Jack Dozer · <span class="text-grey">9:32 pm - 5/6/2018</span></p>
        </div>
    </div>
</div>
```

![](https://3677920472-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBql1s3wlqs4NUfqqiL%2F-LCoM4ZwCXGCOQiEf6MX%2F-LCoM70yhMluE4xsGeXx%2FNotification%20icon.PNG?alt=media\&token=e69684db-689d-473b-a25c-47819b70b372)

### Simple

```markup
<div class="flex items-center rounded-lg shadow-lg mb-4 flex bg-indigo p-4 text-white">
	<div class="w-5/6">
	  <h4 class="mb-2">Title</h4>
	  <p>Lorem ipsum dolor sit amet. </p>
	</div>
	<div class="w-1/6">
	  <i class="material-icons text-5xl bg-indigo-dark rounded-full">
		play_for_work
	  </i>
	</div>
</div>
```