Alert Responsive

                    <div role="alert" class="p-4 bg-blue-50 border-l-4 border-blue-500 rounded-r-md sm:flex sm:items-center">
  <!-- Icon - Always visible -->
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current h-6 w-6 mr-3 text-blue-500 flex-shrink-0 mb-2 sm:mb-0">
    <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>
  
  <!-- Content - Stacked on mobile, side by side on larger screens -->
  <div class="sm:flex-1">
    <h3 class="text-lg font-semibold text-blue-800 mb-1">Updates Available</h3>
    <p class="text-blue-700 mb-3 sm:mb-0">We've released a new version of our application with improved features and bug fixes.</p>
  </div>
  
  <!-- Actions - Bottom on mobile, right side on larger screens -->
  <div class="mt-3 flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 sm:mt-0 sm:ml-4">
    <button class="px-4 py-2 text-sm bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-100">Later</button>
    <button class="px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700">Update Now</button>
  </div>
</div>