Tailwind alerts

Responsive Alerts built with the latest Tailwind. Alerts provide contextual feedback messages for typical user actions with a handful of responsible and flexible alert boxes.


Basic

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<div
class="block text-sm text-left text-gray-600 bg-gray-500 bg-opacity-10 h-12 flex items-center p-4 rounded-md"
role="alert"
>
<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  class="w-6 h-6 mx-2 stroke-current"
>

  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
  ></path>

</svg>
This is a default alert—check it out!
</div>

Basic alert bordered

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div
class="block text-sm text-left text-gray-600 bg-gray-500 bg-opacity-10 border border-gray-400 h-12 flex items-center p-4 rounded-md"
role="alert"
>
This is a default alert—check it out!
</div>

<div
class="my-3 block text-sm text-left text-purple-600 bg-purple-500 bg-opacity-10 border border-purple-400 h-12 flex items-center p-4 rounded-md"
role="alert"
>
This is a primary alert—check it out!
</div>

<div
class="block text-sm text-left text-indigo-600 bg-indigo-500 bg-opacity-10 border border-indigo-400 h-12 flex items-center p-4 rounded-md"
role="alert"
>
This is a success alert—check it out!
</div>

<div
class=" my-3 block text-sm text-left text-blue-600 bg-blue-500 bg-opacity-10 border border-blue-400 h-12 flex items-center p-4 rounded-md"
role="alert"
>
This is a info alert—check it out!
</div>

<div
class="block text-sm text-left text-yellow-600 bg-yellow-500 bg-opacity-10 border border-yellow-400 h-12 flex items-center p-4 rounded-md"
role="alert"
>
This is a warning alert—check it out!
</div>

<div
class=" my-3 block text-sm text-left text-red-600 bg-red-500 bg-opacity-10 border border-red-400 h-12 flex items-center p-4 rounded-md"
role="alert"
>
This is a danger alert—check it out!
</div>

Solid color

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<div
class="block text-sm text-left text-white bg-gray-500 h-12 flex items-center p-4 rounded-md"
role="alert"
>
<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  class="w-6 h-6 mx-2 stroke-current"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
  ></path>
</svg>
This is a default alert—check it out!
</div>
<div
class=" my-3 block text-sm text-left text-white bg-green-500 h-12 flex items-center p-4 rounded-md"
role="alert"
>
<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  class="w-6 h-6 mx-2 stroke-current"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
  ></path>
</svg>
This is a default alert—check it out!
</div>
<div
class="block text-sm text-left text-white bg-purple-500 h-12 flex items-center p-4 rounded-md"
role="alert"
>
<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  class="w-6 h-6 mx-2 stroke-current"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
  ></path>
</svg>
This is a primary alert—check it out!
</div>

<div
class="my-3  block text-sm text-left text-white bg-indigo-500 h-12 flex items-center p-4 rounded-md relative"
role="alert"
>
<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  class="flex-shrink-0 w-6 h-6 mx-2 stroke-current"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
  ></path>
</svg>
This is a success alert—check it out!
<button
  class="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-2 mr-6 outline-none focus:outline-none"
>
  <span>×</span>
</button>
</div>

<div
class=" my-3  block text-sm text-left text-white bg-blue-500 h-12 flex items-center p-4 rounded-md"
role="alert"
>
<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  class="flex-shrink-0 w-6 h-6 mx-2 stroke-current"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
  ></path>
</svg>
This is a info alert—check it out!
</div>

<div
class="my-3  block text-sm text-left text-white bg-yellow-500 h-12 flex items-center p-4 rounded-md"
role="alert"
>
<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  class="w-6 h-6 mx-2 stroke-current"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
  ></path>
</svg>
This is a warning alert—check it out!
</div>

<div
class="block text-sm text-left text-white bg-red-500 h-12 flex items-center p-4 rounded-md"
role="alert"
>
<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  class="w-6 h-6 mx-2 stroke-current"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
  ></path>
</svg>
This is a danger alert—check it out!
</div>

With content

Attention needed

Make sure you know how these changes affect you.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div
class="bg-yellow-500 bg-opacity-10 border-0 rounded-md px-4 py-3 text-yellow-800"
>
<div class="flex">
  <div class="text-yellow-500">
    <i class="fas fa-exclamation-triangle mr-4"></i>
  </div>
  <div>
    <p class="font-medium text-left">Attention needed</p>
    <p class="text-sm my-2">
      Make sure you know how these changes affect you.
    </p>
  </div>
</div>
</div>

With label

Success

Your account was registered!

Info

This channel archived by the owner!

Warning

Your image size is too large!

Error

Your email is already used!

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
<div
class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800"
>
<div class="flex items-center justify-center w-12 bg-green-500">
  <svg
    class="w-6 h-6 text-white fill-current"
    viewBox="0 0 40 40"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"
    />
  </svg>
</div>

<div class="px-4 py-2 -mx-3">
  <div class="mx-3">
    <span class="font-semibold text-green-500 dark:text-green-400"
      >Success</span
    >
    <p class="text-sm text-gray-600 dark:text-gray-200">
      Your account was registered!
    </p>
  </div>
</div>
</div>

<div
class="my-5 flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800"
>
<div class="flex items-center justify-center w-12 bg-blue-500">
  <svg
    class="w-6 h-6 text-white fill-current"
    viewBox="0 0 40 40"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
    />
  </svg>
</div>

<div class="px-4 py-2 -mx-3">
  <div class="mx-3">
    <span class="font-semibold text-blue-500 dark:text-blue-400"
      >Info</span
    >
    <p class="text-sm text-gray-600 dark:text-gray-200">
      This channel archived by the owner!
    </p>
  </div>
</div>
</div>

<div
class="my-5 flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800"
>
<div class="flex items-center justify-center w-12 bg-yellow-400">
  <svg
    class="w-6 h-6 text-white fill-current"
    viewBox="0 0 40 40"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
    />
  </svg>
</div>

<div class="px-4 py-2 -mx-3">
  <div class="mx-3">
    <span class="font-semibold text-yellow-400 dark:text-yellow-300"
      >Warning</span
    >
    <p class="text-sm text-gray-600 dark:text-gray-200">
      Your image size is too large!
    </p>
  </div>
</div>
</div>

<div
class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800"
>
<div class="flex items-center justify-center w-12 bg-red-500">
  <svg
    class="w-6 h-6 text-white fill-current"
    viewBox="0 0 40 40"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"
    />
  </svg>
</div>

<div class="px-4 py-2 -mx-3">
  <div class="mx-3">
    <span class="font-semibold text-red-500 dark:text-red-400"
      >Error</span
    >
    <p class="text-sm text-gray-600 dark:text-gray-200">
      Your email is already used!
    </p>
  </div>
</div>
</div>