Tailwind CSS Alert Components

                            <div role="alert" class="p-4 bg-blue-50 border-l-4 border-blue-500 rounded-r-md">
  <div class="flex items-center">
    <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">
      <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>
    <h3 class="text-lg font-semibold text-blue-800">Information Update</h3>
  </div>
  <div class="mt-2 pl-9 text-blue-700">
    <p>The system will be undergoing maintenance on Saturday from 2AM to 4AM EST. Please save your work before this time.</p>
  </div>
</div> 
                        

                            <div role="alert" class="flex items-center justify-between p-4 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg">
  <div class="flex items-center">
    <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>We use cookies to enhance your browsing experience.</span>
  </div>
  <div class="flex space-x-2">
    <button class="px-3 py-1 text-sm bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-100">Decline</button>
    <button class="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700">Accept</button>
  </div>
</div> 
                        

                            <div role="alert" class="flex items-center p-4 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-700 rounded-r-md">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
  </svg>
  <span>Warning: Please back up your data before continuing.</span>
</div> 
                        

                            <div role="alert" class="flex items-center p-4 bg-green-50 border-l-4 border-green-500 text-green-700 rounded-r-md">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <span>Your purchase has been confirmed successfully!</span>
</div> 
                        

                            <div class="space-y-4">
  <!-- Soft Blue Alert -->
  <div role="alert" class="flex items-center p-4 bg-blue-100/50 text-blue-800 rounded-lg">
    <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>Information: Your profile has been updated.</span>
  </div>
  
  <!-- Soft Green Alert -->
  <div role="alert" class="flex items-center p-4 bg-green-100/50 text-green-800 rounded-lg">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Success: Your changes have been saved.</span>
  </div>
  
  <!-- Soft Yellow Alert -->
  <div role="alert" class="flex items-center p-4 bg-yellow-100/50 text-yellow-800 rounded-lg">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <span>Warning: Your session will expire in 5 minutes.</span>
  </div>
  
  <!-- Soft Red Alert -->
  <div role="alert" class="flex items-center p-4 bg-red-100/50 text-red-800 rounded-lg">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Error: Unable to connect to the server.</span>
  </div>
</div> 
                        

                            <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> 
                        

                            <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> 
                        

                            <div role="alert" class="flex items-center p-4 border-2 border-blue-500 text-blue-700 bg-transparent rounded-lg">
  <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>Please check your email to verify your account.</span>
</div> 
                        

                            <div role="alert" class="flex items-center p-4 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-r-md">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <span>Error! There was a problem processing your request.</span>
</div> 
                        

                            <div role="alert" class="flex items-center justify-between p-4 bg-blue-50 border-l-4 border-blue-500 text-blue-700 rounded-r-md">
  <div class="flex items-center">
    <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>Your trial expires in 7 days. Upgrade your account now.</span>
  </div>
  <button class="text-blue-500 hover:text-blue-700" aria-label="Close">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div> 
                        

                            <div class="space-y-4">
  <!-- Dash Blue Alert -->
  <div role="alert" class="flex items-center p-4 bg-blue-50 border-2 border-dashed border-blue-500 text-blue-700 rounded-lg">
    <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>Important information you should know about.</span>
  </div>
  
  <!-- Dash Green Alert -->
  <div role="alert" class="flex items-center p-4 bg-green-50 border-2 border-dashed border-green-500 text-green-700 rounded-lg">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>The task has been completed successfully.</span>
  </div>
  
  <!-- Dash Yellow Alert -->
  <div role="alert" class="flex items-center p-4 bg-yellow-50 border-2 border-dashed border-yellow-500 text-yellow-700 rounded-lg">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <span>Proceed with caution when making these changes.</span>
  </div>
</div> 
                        

                            <div class="space-y-4">
  <!-- Dark Blue Alert -->
  <div role="alert" class="flex items-center p-4 bg-gray-800 border-l-4 border-blue-500 text-gray-100 rounded-r-md">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-blue-400 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>Information: Dark theme is now enabled.</span>
  </div>
  
  <!-- Dark Green Alert -->
  <div role="alert" class="flex items-center p-4 bg-gray-800 border-l-4 border-green-500 text-gray-100 rounded-r-md">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3 stroke-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Success: Your changes have been saved.</span>
  </div>
  
  <!-- Dark Yellow Alert -->
  <div role="alert" class="flex items-center p-4 bg-gray-800 border-l-4 border-yellow-500 text-gray-100 rounded-r-md">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3 stroke-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <span>Warning: Your session will expire in 5 minutes.</span>
  </div>
  
  <!-- Dark Red Alert -->
  <div role="alert" class="flex items-center p-4 bg-gray-800 border-l-4 border-red-500 text-gray-100 rounded-r-md">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3 stroke-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Error: Unable to connect to the server.</span>
  </div>
</div> 
                        

                            <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>New information available. Click here to view.</span>
</div>