Alerts | Code With Tony

Default Success Alert

Tailwind CSS success alert component

 1                    <div
 2  class="flex w-full rounded-lg bg-green-200 dark:bg-slate-800 dark:text-green-300 px-7 py-8 shadow-md md:p-9"
 3>
 4  <div
 5    class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-green-500"
 6  >
 7    <svg
 8      width="16"
 9      height="12"
10      viewBox="0 0 16 12"
11      fill="none"
12      xmlns="http://www.w3.org/2000/svg"
13    >
14      <path
15        d="M15.2984 0.826822L15.2868 0.811827L15.2741 0.797751C14.9173 0.401867 14.3238 0.400754 13.9657 0.794406L5.91888 9.45376L2.05667 5.2868C1.69856 4.89287 1.10487 4.89389 0.747996 5.28987C0.417335 5.65675 0.417335 6.22337 0.747996 6.59026L0.747959 6.59029L0.752701 6.59541L4.86742 11.0348C5.14445 11.3405 5.52858 11.5 5.89581 11.5C6.29242 11.5 6.65178 11.3355 6.92401 11.035L15.2162 2.11161C15.5833 1.74452 15.576 1.18615 15.2984 0.826822Z"
16        fill="white"
17        stroke="white"
18      ></path>
19    </svg>
20  </div>
21  <div class="w-full">
22    <h5 class="mb-3 text-lg font-semibold text-dark">
23      Successfull Message
24    </h5>
25    <p class="text-base leading-relaxed text-body-color">
26      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
27    </p>
28  </div>
29</div>

Default Error Alert

Tailwind CSS error alert component

 1                    <div
 2  class="flex w-full rounded-lg bg-red-200 text-red-800 dark:bg-gray-800 dark:text-red-400 px-7 py-8 shadow-md md:p-9"
 3>
 4  <div
 5    class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-red-500"
 6  >
 7    <svg
 8      width="13"
 9      height="13"
10      viewBox="0 0 13 13"
11      fill="none"
12      xmlns="http://www.w3.org/2000/svg"
13    >
14      <path
15        d="M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z"
16        fill="#ffffff"
17        stroke="#ffffff"
18      ></path>
19    </svg>
20  </div>
21  <div class="w-full">
22    <h5 class="mb-3 text-lg font-semibold text-dark">
23      Error Message
24    </h5>
25    <p class="text-base leading-relaxed text-body-color">
26      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
27    </p>
28  </div>
29</div>

Default Info Alert

Tailwind CSS info alert component

 1                    <div
 2  class="flex w-full rounded-lg bg-blue-200 text-blue-800 dark:bg-gray-800 dark:text-blue-400 px-7 py-8 shadow-md md:p-9"
 3>
 4  <div
 5    class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-blue-500"
 6  >
 7   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 8         <path fill-rule="evenodd" clip-rule="evenodd" d="M10 2.58333C5.90389 2.58333 2.58333 5.90389 2.58333 10C2.58333 14.0961 5.90389 17.4167 10 17.4167C14.0961 17.4167 17.4167 14.0961 17.4167 10C17.4167 5.90389 14.0961 2.58333 10 2.58333ZM0.75 10C0.75 4.89137 4.89137 0.75 10 0.75C15.1086 0.75 19.25 4.89137 19.25 10C19.25 15.1086 15.1086 19.25 10 19.25C4.89137 19.25 0.75 15.1086 0.75 10Z" fill="white"></path>
 9         <path fill-rule="evenodd" clip-rule="evenodd" d="M10.2011 6.76824C9.83259 6.70503 9.45358 6.77428 9.13121 6.96374C8.80884 7.1532 8.56393 7.45063 8.43984 7.80337C8.27184 8.28094 7.7485 8.5319 7.27093 8.3639C6.79336 8.1959 6.5424 7.67256 6.7104 7.19499C6.97815 6.43383 7.50665 5.792 8.20229 5.38316C8.89793 4.97433 9.7158 4.82489 10.5111 4.9613C11.3063 5.0977 12.0277 5.51117 12.5473 6.12845C13.0668 6.74562 13.3512 7.52671 13.3501 8.33343C13.3497 9.65287 12.3721 10.5168 11.6919 10.9702C11.3238 11.2156 10.9623 11.3957 10.6964 11.5139C10.5621 11.5736 10.4489 11.6189 10.3672 11.6501C10.3263 11.6657 10.293 11.6778 10.2686 11.6864L10.2389 11.6969L10.2293 11.7001L10.2258 11.7013L10.2245 11.7018C10.2242 11.7018 10.2233 11.7021 9.93345 10.8325L10.2233 11.7021C9.74305 11.8622 9.22392 11.6027 9.06383 11.1224C8.90392 10.6427 9.16271 10.1242 9.64194 9.96343C9.6421 9.96337 9.6414 9.96361 9.64194 9.96343L9.65444 9.95905C9.66671 9.95468 9.68713 9.94728 9.71455 9.93683C9.76952 9.91589 9.85167 9.88309 9.95178 9.8386C10.1546 9.74845 10.4181 9.61608 10.675 9.4448C11.2446 9.06504 11.5168 8.67922 11.5168 8.33251L11.5168 8.33114C11.5173 7.95722 11.3855 7.59517 11.1447 7.30912C10.9039 7.02306 10.5697 6.83145 10.2011 6.76824ZM9.64194 9.96343C9.6421 9.96337 9.6414 9.96361 9.64194 9.96343V9.96343ZM13.3501 8.33343C13.3501 8.33358 13.3501 8.33328 13.3501 8.33343L12.4335 8.33251H13.3501C13.3501 8.33282 13.3501 8.33312 13.3501 8.33343Z" fill="white"></path>
10         <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08301 14.1667C9.08301 13.6604 9.49341 13.25 9.99967 13.25H10.008C10.5143 13.25 10.9247 13.6604 10.9247 14.1667C10.9247 14.6729 10.5143 15.0833 10.008 15.0833H9.99967C9.49341 15.0833 9.08301 14.6729 9.08301 14.1667Z" fill="white"></path>
11      </svg>
12  </div>
13  <div class="w-full">
14    <h5 class="mb-3 text-lg font-semibold text-dark">
15      Info Message
16    </h5>
17    <p class="text-base leading-relaxed text-body-color">
18      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
19    </p>
20  </div>
21</div>

Default Warning Alert

Tailwind CSS warning alert component.

 1                    <div
 2  class="flex w-full rounded-lg bg-yellow-200 text-yellow-800 dark:bg-gray-800 dark:text-yellow-400 px-7 py-8 shadow-md md:p-9"
 3>
 4  <div
 5    class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-yellow-500"
 6  >
 7   <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 8         <path d="M1.42572 16H16.5811C17.6404 16 18.3233 14.9018 17.844 13.9735L10.2664 0.770573C9.7439 -0.256858 8.24852 -0.256858 7.72606 0.770573L0.148374 13.9735C-0.316489 14.8998 0.366408 16 1.42572 16ZM10.1923 12.9298C10.1923 13.6155 9.68425 14.1433 8.95815 14.1433C8.23206 14.1433 7.724 13.6155 7.724 12.9298V12.9015C7.724 12.2159 8.23206 11.688 8.95815 11.688C9.68425 11.688 10.1923 12.2159 10.1923 12.9015V12.9298ZM8.29171 4.01062H9.7151C10.1059 4.01062 10.3383 4.33826 10.2952 4.75288L9.66985 10.1186C9.62665 10.5049 9.36542 10.7455 9.00135 10.7455C8.63933 10.7455 8.37605 10.5028 8.33285 10.1186L7.70755 4.75288C7.66847 4.33826 7.9009 4.01062 8.29171 4.01062Z" fill="white"></path>
 9      </svg>
10  </div>
11  <div class="w-full">
12    <h5 class="mb-3 text-lg font-semibold text-dark">
13      Info Message
14    </h5>
15    <p class="text-base leading-relaxed text-body-color">
16      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
17    </p>
18  </div>
19</div>

Bordered Success Alert

Tailwind CSS bordered success alert

 1                    <div
 2 class="flex w-full rounded-lg bg-green-200 dark:bg-slate-800 dark:text-green-300 px-7 py-8 border border-green-300 dark:border-green-700 shadow-md md:p-9"
 3>
 4 <div
 5 class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-green-500"
 6 >
 7 <svg
 8 width="16"
 9 height="12"
10 viewBox="0 0 16 12"
11 fill="none"
12 xmlns="http://www.w3.org/2000/svg"
13 >
14 <path
15 d="M15.2984 0.826822L15.2868 0.811827L15.2741 0.797751C14.9173 0.401867 14.3238 0.400754 13.9657 0.794406L5.91888 9.45376L2.05667 5.2868C1.69856 4.89287 1.10487 4.89389 0.747996 5.28987C0.417335 5.65675 0.417335 6.22337 0.747996 6.59026L0.747959 6.59029L0.752701 6.59541L4.86742 11.0348C5.14445 11.3405 5.52858 11.5 5.89581 11.5C6.29242 11.5 6.65178 11.3355 6.92401 11.035L15.2162 2.11161C15.5833 1.74452 15.576 1.18615 15.2984 0.826822Z"
16 fill="white"
17 stroke="white"
18 ></path>
19 </svg>
20 </div>
21 <div class="w-full">
22 <h5 class="mb-3 text-lg font-semibold text-dark">
23 Successfull Message
24 </h5>
25 <p class="text-base leading-relaxed text-body-color">
26 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
27 </p>
28 </div>
29</div>

Bordered Error Alert

Tailwind CSS bordered error alert component

 1                    <div
 2 class="flex w-full rounded-lg bg-red-200 dark:bg-slate-800 dark:text-red-300 px-7 py-8 border border-red-300 dark:border-red-700 shadow-md md:p-9"
 3>
 4 <div
 5 class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-red-500"
 6 >
 7 <svg
 8      width="13"
 9      height="13"
10      viewBox="0 0 13 13"
11      fill="none"
12      xmlns="http://www.w3.org/2000/svg"
13    >
14      <path
15        d="M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z"
16        fill="#ffffff"
17        stroke="#ffffff"
18      ></path>
19    </svg>
20 </div>
21 <div class="w-full">
22 <h5 class="mb-3 text-lg font-semibold text-dark">
23 Error Message
24 </h5>
25 <p class="text-base leading-relaxed text-body-color">
26 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
27 </p>
28 </div>
29</div>

Bordered Info Alert

Tailwind CSS bordered info alert component

 1                    <div
 2 class="flex w-full rounded-lg bg-blue-200 dark:bg-slate-800 dark:text-blue-300 px-7 py-8 border border-blue-300 dark:border-blue-700 shadow-md md:p-9"
 3>
 4 <div
 5 class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-blue-500"
 6 >
 7<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 8         <path fill-rule="evenodd" clip-rule="evenodd" d="M10 2.58333C5.90389 2.58333 2.58333 5.90389 2.58333 10C2.58333 14.0961 5.90389 17.4167 10 17.4167C14.0961 17.4167 17.4167 14.0961 17.4167 10C17.4167 5.90389 14.0961 2.58333 10 2.58333ZM0.75 10C0.75 4.89137 4.89137 0.75 10 0.75C15.1086 0.75 19.25 4.89137 19.25 10C19.25 15.1086 15.1086 19.25 10 19.25C4.89137 19.25 0.75 15.1086 0.75 10Z" fill="white"></path>
 9         <path fill-rule="evenodd" clip-rule="evenodd" d="M10.2011 6.76824C9.83259 6.70503 9.45358 6.77428 9.13121 6.96374C8.80884 7.1532 8.56393 7.45063 8.43984 7.80337C8.27184 8.28094 7.7485 8.5319 7.27093 8.3639C6.79336 8.1959 6.5424 7.67256 6.7104 7.19499C6.97815 6.43383 7.50665 5.792 8.20229 5.38316C8.89793 4.97433 9.7158 4.82489 10.5111 4.9613C11.3063 5.0977 12.0277 5.51117 12.5473 6.12845C13.0668 6.74562 13.3512 7.52671 13.3501 8.33343C13.3497 9.65287 12.3721 10.5168 11.6919 10.9702C11.3238 11.2156 10.9623 11.3957 10.6964 11.5139C10.5621 11.5736 10.4489 11.6189 10.3672 11.6501C10.3263 11.6657 10.293 11.6778 10.2686 11.6864L10.2389 11.6969L10.2293 11.7001L10.2258 11.7013L10.2245 11.7018C10.2242 11.7018 10.2233 11.7021 9.93345 10.8325L10.2233 11.7021C9.74305 11.8622 9.22392 11.6027 9.06383 11.1224C8.90392 10.6427 9.16271 10.1242 9.64194 9.96343C9.6421 9.96337 9.6414 9.96361 9.64194 9.96343L9.65444 9.95905C9.66671 9.95468 9.68713 9.94728 9.71455 9.93683C9.76952 9.91589 9.85167 9.88309 9.95178 9.8386C10.1546 9.74845 10.4181 9.61608 10.675 9.4448C11.2446 9.06504 11.5168 8.67922 11.5168 8.33251L11.5168 8.33114C11.5173 7.95722 11.3855 7.59517 11.1447 7.30912C10.9039 7.02306 10.5697 6.83145 10.2011 6.76824ZM9.64194 9.96343C9.6421 9.96337 9.6414 9.96361 9.64194 9.96343V9.96343ZM13.3501 8.33343C13.3501 8.33358 13.3501 8.33328 13.3501 8.33343L12.4335 8.33251H13.3501C13.3501 8.33282 13.3501 8.33312 13.3501 8.33343Z" fill="white"></path>
10         <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08301 14.1667C9.08301 13.6604 9.49341 13.25 9.99967 13.25H10.008C10.5143 13.25 10.9247 13.6604 10.9247 14.1667C10.9247 14.6729 10.5143 15.0833 10.008 15.0833H9.99967C9.49341 15.0833 9.08301 14.6729 9.08301 14.1667Z" fill="white"></path>
11      </svg>
12 </div>
13 <div class="w-full">
14 <h5 class="mb-3 text-lg font-semibold text-dark">
15 Warning Message
16 </h5>
17 <p class="text-base leading-relaxed text-body-color">
18 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
19 </p>
20 </div>
21</div>

Bordered Warning Alert

Tailwind CSS bordered warning alert component

 1                    <div
 2 class="flex w-full rounded-lg bg-yellow-200 dark:bg-slate-800 dark:text-yellow-300 px-7 py-8 border border-yellow-300 dark:border-yellow-700 shadow-md md:p-9"
 3>
 4 <div
 5 class="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-yellow-500"
 6 >
 7 <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 8         <path d="M1.42572 16H16.5811C17.6404 16 18.3233 14.9018 17.844 13.9735L10.2664 0.770573C9.7439 -0.256858 8.24852 -0.256858 7.72606 0.770573L0.148374 13.9735C-0.316489 14.8998 0.366408 16 1.42572 16ZM10.1923 12.9298C10.1923 13.6155 9.68425 14.1433 8.95815 14.1433C8.23206 14.1433 7.724 13.6155 7.724 12.9298V12.9015C7.724 12.2159 8.23206 11.688 8.95815 11.688C9.68425 11.688 10.1923 12.2159 10.1923 12.9015V12.9298ZM8.29171 4.01062H9.7151C10.1059 4.01062 10.3383 4.33826 10.2952 4.75288L9.66985 10.1186C9.62665 10.5049 9.36542 10.7455 9.00135 10.7455C8.63933 10.7455 8.37605 10.5028 8.33285 10.1186L7.70755 4.75288C7.66847 4.33826 7.9009 4.01062 8.29171 4.01062Z" fill="white"></path>
 9      </svg>
10 </div>
11 <div class="w-full">
12 <h5 class="mb-3 text-lg font-semibold text-dark">
13 Warning Message
14 </h5>
15 <p class="text-base leading-relaxed text-body-color">
16 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
17 </p>
18 </div>
19</div>