Alert Sizes

                    <div class="space-y-4">
  <!-- Small Alert -->
  <div role="alert" class="flex items-center p-2 bg-blue-50 border-l-4 border-blue-500 text-blue-700 text-sm rounded-r-md">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current h-4 w-4 mr-2">
      <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>
    <span>Small alert with compact design.</span>
  </div>
  
  <!-- Medium Alert (Default) -->
  <div role="alert" class="flex items-center p-4 bg-blue-50 border-l-4 border-blue-500 text-blue-700 rounded-r-md">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current h-6 w-6 mr-3">
      <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>
    <span>Default medium-sized alert component.</span>
  </div>
  
  <!-- Large Alert -->
  <div role="alert" class="flex items-center p-5 bg-blue-50 border-l-4 border-blue-500 text-blue-700 text-lg rounded-r-md">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current h-8 w-8 mr-4">
      <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>
    <span>Large alert with increased visibility for important messages.</span>
  </div>
</div>