Alert Rails Components

<!-- Basic Success Alert -->
<div class="rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-900/20">
  <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
    <div class="flex items-center h-full">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-green-500 dark:text-green-400">
        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
          <circle cx="9" cy="9" r="7.25"></circle>
          <polyline points="5.75 9.25 8 11.75 12.25 6.25"></polyline>
        </g>
      </svg>
    </div>
    <h3 class="text-sm font-medium text-green-800 dark:text-green-200">
      Success! Your changes have been saved
    </h3>
    <div></div>
    <div class="text-sm text-green-700 dark:text-green-300">
      This is an alert with icon, title and description.
    </div>
  </div>
</div>

<!-- Error Alert -->
<div class="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
  <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
    <div class="flex items-center h-full">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-red-500 dark:text-red-400">
        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
          <path d="M9 16.25C13.0041 16.25 16.25 13.004 16.25 9C16.25 4.996 13.0041 1.75 9 1.75C4.9959 1.75 1.75 4.996 1.75 9C1.75 13.004 4.9959 16.25 9 16.25Z"></path>
          <path d="M9 5.431V9.5"></path>
          <path d="M9 13.417C8.448 13.417 8 12.968 8 12.417C8 11.866 8.448 11.417 9 11.417C9.552 11.417 10 11.866 10 12.417C10 12.968 9.552 13.417 9 13.417Z" fill="currentColor" data-stroke="none" stroke="none"></path>
        </g>
      </svg>
    </div>
    <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
      Something went wrong!
    </h3>
    <div></div>
    <div class="text-sm text-red-700 dark:text-red-300">
      Please check your input and try again. If the problem persists, contact support.
    </div>
  </div>
</div>

<!-- Alert with no description -->
<div class="rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20">
  <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
    <div class="flex items-center h-full">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-blue-500 dark:text-blue-400">
        <g fill="currentColor">
          <path d="M2.34201 4.97401L3.60501 5.39501L4.02601 6.65801C4.09401 6.86201 4.28601 7.00001 4.50101 7.00001C4.71601 7.00001 4.90701 6.86201 4.97601 6.65801L5.39701 5.39501L6.66001 4.97401C6.86401 4.90601 7.00201 4.71501 7.00201 4.50001C7.00201 4.28501 6.86401 4.09401 6.66001 4.02601L5.39701 3.60501L4.97601 2.34201C4.83901 1.93401 4.16401 1.93401 4.02701 2.34201L3.60601 3.60501L2.34301 4.02601C2.13901 4.09401 2.00101 4.28501 2.00101 4.50001C2.00101 4.71501 2.13801 4.90601 2.34201 4.97401Z"></path>
          <path d="M15.659 13.026L14.395 12.605L13.974 11.342C13.837 10.934 13.162 10.934 13.025 11.342L12.604 12.605L11.341 13.026C11.137 13.094 10.999 13.285 10.999 13.5C10.999 13.715 11.137 13.906 11.341 13.974L12.604 14.395L13.025 15.658C13.093 15.862 13.285 16 13.5 16C13.715 16 13.906 15.862 13.975 15.658L14.396 14.395L15.659 13.974C15.863 13.906 16.001 13.715 16.001 13.5C16.001 13.285 15.863 13.094 15.659 13.026Z"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M6 8C6.34148 8 6.63985 8.23067 6.72584 8.56115L7.28597 10.714L9.43885 11.2742C9.76933 11.3601 10 11.6585 10 12C10 12.3415 9.76933 12.6399 9.43885 12.7258L7.28597 13.286L6.72584 15.4388C6.63985 15.7693 6.34148 16 6 16C5.65852 16 5.36015 15.7693 5.27416 15.4388L4.71403 13.286L2.56115 12.7258C2.23067 12.6399 2 12.3415 2 12C2 11.6585 2.23067 11.3601 2.56115 11.2742L4.71403 10.714L5.27416 8.56115C5.36015 8.23067 5.65852 8 6 8Z"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C12.3415 2 12.6399 2.23067 12.7258 2.56115L13.286 4.71402L15.4389 5.27417C15.7693 5.36015 16 5.65852 16 6C16 6.34148 15.7693 6.63985 15.4389 6.72583L13.286 7.28598L12.7258 9.43885C12.6399 9.76933 12.3415 10 12 10C11.6585 10 11.3601 9.76933 11.2742 9.43885L10.714 7.28598L8.56115 6.72583C8.23067 6.63985 8 6.34148 8 6C8 5.65852 8.23067 5.36015 8.56115 5.27417L10.714 4.71402L11.2742 2.56115C11.3601 2.23067 11.6585 2 12 2Z"></path>
        </g>
      </svg>
    </div>
    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
      This is an alert title with no description
    </h3>
  </div>
</div>

<!-- Neutral Alert -->
<div class="rounded-xl border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-700 dark:bg-neutral-800/50">
  <div class="grid grid-cols-[auto_1fr] gap-2 items-start">
    <div class="flex items-center h-full">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="text-neutral-500 dark:text-neutral-400">
        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
          <circle cx="9" cy="9" r="7.25"></circle>
          <path d="M9 5.75V9.25"></path>
          <path d="M9 12.25H9.0075"></path>
        </g>
      </svg>
    </div>
    <h3 class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
      Information
    </h3>
    <div></div>
    <div class="text-sm text-neutral-600 dark:text-neutral-400">
      This is a neutral alert for general information or updates that don't require immediate attention.
    </div>
  </div>
</div>