Alert Components: Taco Component Library

Alert-1

<!--SUCCESS  -->
<div class="flex items-center justify-center gap-4 bg-emerald-100 dark:bg-emerald-700/20 dark:text-emerald-600 dark:border-emerald-600 border-b-2 border-emerald-300 text-emerald-800 text-lg p-3 px-4 rounded-md lg:max-w-md lg:w-full w-4/5 max-sm:text-base max-[350px]:flex-col">
  <span><svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <path d="M9 12l2 2l4 -4" /> </svg></span>
  This is a success message
  <span class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <path d="M10 10l4 4m0 -4l-4 4" /> </svg></span>
</div>

<!-- ERROR -->
<div class="flex items-center justify-center gap-4 bg-red-100/80 border-b-2 border-red-300 text-red-900 dark:bg-red-700/20 dark:text-red-400 dark:border-red-400 text-lg p-3 px-4 rounded-md lg:max-w-md lg:w-full w-4/5 max-sm:text-base max-[350px]:flex-col">
  <span> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <line x1="12" y1="8" x2="12" y2="12" /> <line x1="12" y1="16" x2="12.01" y2="16" /> </svg></span>
  This is an Error message
  <span class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <path d="M10 10l4 4m0 -4l-4 4" /> </svg></span>
</div>

<!-- WARNING -->
<div class="flex items-center justify-center gap-4 bg-amber-100/80 border-b-2 border-amber-300 text-amber-900 dark:bg-amber-700/20 dark:text-amber-400/70 dark:border-amber-400/70 text-lg p-3 px-4 rounded-md lg:max-w-md lg:w-full w-4/5 max-sm:text-base max-[350px]:flex-col">
  <span><svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M12 9v2m0 4v.01" /> <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /> </svg></span>
  This is a warning message
  <span class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <path d="M10 10l4 4m0 -4l-4 4" /> </svg></span>
</div>

<!-- INFO -->
<div class="flex items-center justify-center gap-4 bg-sky-100 border-b-2 border-sky-300 text-sky-900 dark:bg-sky-700/20 dark:text-sky-700 dark:border-sky-700 text-lg p-3 px-4 rounded-md lg:max-w-md lg:w-full w-4/5 max-sm:text-base max-[350px]:flex-col">
  <span><svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <line x1="12" y1="8" x2="12" y2="12" /> <line x1="12" y1="16" x2="12.01" y2="16" /> </svg></span>
  This shows information
  <span class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <path d="M10 10l4 4m0 -4l-4 4" /> </svg></span>
</div>

Alert-2

  <!--SUCCESS  -->
  <div class="flex items-center justify-center gap-4 border border-emerald-700 dark:border-emerald-700/60 dark:text-emerald-600 text-emerald-800 text-lg p-3 px-4 rounded-md lg:max-w-md lg:w-full w-4/5 max-sm:text-base max-[350px]:flex-col">
    <span> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <path d="M9 12l2 2l4 -4" /> </svg> </span>
    This is a success message
    <span class="ml-auto"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <path d="M10 10l4 4m0 -4l-4 4" /> </svg> </span>
  </div>

  <!-- Error -->
  <div class="flex items-center justify-center gap-4 text-red-900 border border-red-900 dark:border-red-400/70 dark:text-red-400 text-lg p-3 px-4 rounded-md lg:max-w-md lg:w-full w-4/5 max-sm:text-base max-[350px]:flex-col">
    <span> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <line x1="12" y1="8" x2="12" y2="12" /> <line x1="12" y1="16" x2="12.01" y2="16" /> </svg> </span>
    This is an Error message
    <span class="ml-auto"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <path d="M10 10l4 4m0 -4l-4 4" /> </svg> </span>
  </div>

  <!-- WARNING -->
  <div class="flex items-center justify-center gap-4 text-amber-700 dark:text-amber-400/70 border border-amber-700 dark:border-amber-400/60 text-lg p-3 px-4 rounded-md lg:max-w-md lg:w-full w-4/5 max-sm:text-base max-[350px]:flex-col">
    <span> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M12 9v2m0 4v.01" /> <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /> </svg> </span>
    This is a warning message
    <span class="ml-auto"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <path d="M10 10l4 4m0 -4l-4 4" /> </svg> </span>
  </div>

  <!-- info -->
  <div class="flex items-center justify-center gap-4 border border-sky-700 dark:border-sky-700/60 text-sky-900 dark:text-sky-700 text-lg p-3 px-4 rounded-md lg:max-w-md lg:w-full w-4/5 max-sm:text-base max-[350px]:flex-col">
    <span> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <line x1="12" y1="8" x2="12" y2="12" /> <line x1="12" y1="16" x2="12.01" y2="16" /> </svg> </span>
    This shows information
    <span class="ml-auto"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 max-sm:w-6 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <path d="M10 10l4 4m0 -4l-4 4" /> </svg> </span>
  </div>