Search Components

Alert Messages

Informational messages to notify users

Alert Messages Component

A complex, responsive alert messages component designed with Material Design principles, using ocean/blue tones, suitable for non-profit/charity websites. Includes multiple alert types, dismiss functionality, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-300 mb-8 text-center">Alert Messages</h2>

  <!-- Success Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-blue-50 dark:bg-blue-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-blue-200 dark:border-blue-800">
      <div class="flex-shrink-0 text-blue-600 dark:text-blue-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-blue-800 dark:text-blue-200">Donation Successful!</h3>
        <p class="text-sm sm:text-base text-blue-700 dark:text-blue-300 mt-1">Thank you for your generous contribution. Your support helps us provide clean water to communities in need.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-blue-600 dark:text-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-blue-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Info Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-indigo-50 dark:bg-indigo-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-indigo-200 dark:border-indigo-800">
      <div class="flex-shrink-0 text-indigo-600 dark:text-indigo-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-indigo-800 dark:text-indigo-200">Event Reminder</h3>
        <p class="text-sm sm:text-base text-indigo-700 dark:text-indigo-300 mt-1">Join us for our annual Charity Gala on November 15th! Purchase your tickets now to support education programs.</p>
        <div class="mt-3 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-indigo-900 transition-colors duration-200 shadow-sm">
            Learn More
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
          <button type="button" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-indigo-700 dark:text-indigo-300 bg-white dark:bg-transparent border border-indigo-300 dark:border-indigo-700 hover:bg-indigo-100 dark:hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-indigo-900 transition-colors duration-200 shadow-sm">
            Dismiss
          </button>
        </div>
      </div>
      <div class="ml-auto pl-4 hidden sm:block">
        <img src="https://picsum.photos/id/1084/100/100" alt="Event image" class="w-16 h-16 sm:w-20 sm:h-20 rounded-lg object-cover shadow-sm">
      </div>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-orange-200 dark:border-orange-800">
      <div class="flex-shrink-0 text-orange-600 dark:text-orange-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-orange-800 dark:text-orange-200">Urgent Action Required!</h3>
        <p class="text-sm sm:text-base text-orange-700 dark:text-orange-300 mt-1">Our emergency food drive ends in 48 hours. Please consider donating non-perishable items to help local families.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-orange-600 dark:text-orange-400 hover:bg-orange-200 dark:hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-orange-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-red-50 dark:bg-red-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-red-200 dark:border-red-800">
      <div class="flex-shrink-0 text-red-600 dark:text-red-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-red-800 dark:text-red-200">Payment Processing Error</h3>
        <p class="text-sm sm:text-base text-red-700 dark:text-red-300 mt-1">Oops! There was an issue processing your last donation. Please check your payment details or try again later.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-red-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Interactive Success Alert with Avatar -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-lg bg-emerald-50 dark:bg-emerald-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-emerald-200 dark:border-emerald-800">
      <div class="flex-shrink-0 flex justify-center items-center h-full text-emerald-600 dark:text-emerald-400 mb-4 sm:mb-0 sm:mr-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Supporter Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full object-cover shadow-sm border-2 border-emerald-300 dark:border-emerald-700">
      </div>
      <div class="flex-1 text-center sm:text-left">
        <h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200">Thank you, Sarah J.!</h3>
        <p class="text-sm sm:text-base text-emerald-700 dark:text-emerald-300 mt-1">Your recent contribution of $100 has been successfully received. We are incredibly grateful for your continued support.</p>
        <div class="mt-3 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 justify-center sm:justify-start">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-white bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200 shadow-sm">
            View Impact
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-4a1 1 0 01-1.414-1.414L8.586 10l-1.293-1.293a1 1 0 111.414-1.414L10 8.586l1.293-1.293a1 1 0 111.414 1.414L11.414 10l1.293 1.293a1 1 0 01-1.414 1.414L10 11.414l-1.293 1.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
          <button type="button" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-emerald-700 dark:text-emerald-300 bg-white dark:bg-transparent border border-emerald-300 dark:border-emerald-700 hover:bg-emerald-100 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200 shadow-sm">
            Share on Social
          </button>
        </div>
      </div>
      <div class="ml-auto pl-4 self-start hidden sm:block">
         <button type="button" class="flex-shrink-0 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

</div>

Monospace_Developer_Alert_Messages_Component

A complex, monospace-inspired alert messages component with a black, white, and accent color scheme, designed for blog/content consumption. Includes responsive design and dark mode support.

Open Preview

                <div class="font-mono p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen">
  <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-8 text-gray-900 dark:text-gray-100 border-b-2 border-gray-300 dark:border-gray-700 pb-2">
    System Alerts <span class="text-green-500">_</span>
  </h1>

  <!-- Success Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-green-600 bg-green-50 dark:bg-gray-800 text-green-800 dark:text-green-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-green-600 dark:text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-green-300">[SUCCESS] Operation Complete</h3>
        <p class="text-sm sm:text-base mt-1">Files synchronized successfully. Total <code>24</code> items updated. Log ID: <span class="bg-green-100 dark:bg-gray-700 rounded px-1 py-0.5 text-green-900 dark:text-green-400 text-xs"><code>#SYS_LOG_20231027_001</code></span></p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-green-100 dark:bg-gray-700 text-green-900 dark:text-green-400 rounded overflow-x-auto whitespace-pre-wrap"><code>console.log('Sync successful at ' + new Date().toISOString());</code></pre>
        <div class="mt-4 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <button class="px-4 py-2 text-black bg-green-500 dark:bg-green-600 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>View Log Details</code>
          </button>
          <button class="px-4 py-2 text-green-800 dark:text-green-400 border border-green-600 dark:border-green-500 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-green-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Dismiss</code>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-yellow-600 bg-yellow-50 dark:bg-gray-800 text-yellow-800 dark:text-yellow-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-yellow-600 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM10 13a1 1 0 100-2 1 1 0 000 2zm-1-4a1 1 0 102 0V6a1 1 0 10-2 0v3z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-yellow-300">[WARNING] Disk Usage Critical</h3>
        <p class="text-sm sm:text-base mt-1">Storage <code>/dev/sda1</code> is at <span class="bg-yellow-100 dark:bg-gray-700 rounded px-1 py-0.5 text-yellow-900 dark:text-yellow-400 text-xs"><code>92%</code></span> capacity. Consider clearing old logs.</p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-yellow-100 dark:bg-gray-700 text-yellow-900 dark:text-yellow-400 rounded overflow-x-auto whitespace-pre-wrap"><code>df -h /dev/sda1
Filesystem      Size  Used Avail Use% Mounted on
/dev/sda1       98G   90G  4.5G  92% /</code></pre>
        <div class="mt-4 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <button class="px-4 py-2 text-black bg-yellow-500 dark:bg-yellow-600 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Optimize Storage</code>
          </button>
          <button class="px-4 py-2 text-yellow-800 dark:text-yellow-400 border border-yellow-600 dark:border-yellow-500 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-yellow-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Acknowledge</code>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-red-600 bg-red-50 dark:bg-gray-800 text-red-800 dark:text-red-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-red-600 dark:text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-red-300">[ERROR] Database Connection Failed</h3>
        <p class="text-sm sm:text-base mt-1">Failed to establish connection to <code>production_db</code>. Error code: <span class="bg-red-100 dark:bg-gray-700 rounded px-1 py-0.5 text-red-900 dark:text-red-400 text-xs"><code>DB-ERR-503</code></span>. Check network.</p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-red-100 dark:bg-gray-700 text-red-900 dark:text-red-400 rounded overflow-x-auto whitespace-pre-wrap"><code>{ "timestamp": "2023-10-27T10:30:00Z"

E-commerce Monochromatic Alert

A simple, responsive alert message component for e-commerce, featuring a monochromatic color scheme and subtle micro-interaction for dismiss. Supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-700 text-blue-800 dark:text-blue-100 shadow-md rounded-lg mx-auto max-w-sm sm:max-w-md md:max-w-xl flex items-start justify-between transition-all duration-300 ease-in-out transform hover:scale-[1.005]">
  <div class="flex items-center">
    <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 animate-bounce-in" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <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" />
    </svg>
    <div class="text-sm sm:text-base font-medium leading-relaxed">
      <p class="mb-1 font-semibold">Item Added to Cart!</p>
      <p class="text-blue-700 dark:text-blue-200">Your selected product has been successfully added.</p>
    </div>
  </div>
  <button class="ml-4 p-2 transition-all duration-200 ease-linear rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 group">
    <svg class="h-5 w-5 text-blue-600 dark:text-blue-300 group-hover:rotate-90 transition-transform duration-300" 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>

<style>
  @keyframes bounce-in {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  .animate-bounce-in {
    animation: bounce-in 0.5s ease-out both;
  }
</style>

Corporate_Professional_Alert_Messages

A collection of clean, trustworthiness-inspired alert messages suitable for business or portfolio environments, featuring jewel-tone colors and responsive design with dark mode support. Includes informational, success, warning, and error alerts.

Open Preview

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">

  <!-- Information Alert (Sapphire Blue) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-blue-600 bg-blue-50 dark:bg-blue-950 dark:border-blue-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-blue-700 dark:text-blue-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M8.257 3.328a1.5 1.5 0 013.486 0l4.316 6.302a1.5 1.5 0 01-1.317 2.37H5.258a1.5 1.5 0 01-1.317-2.37l4.316-6.302zM10 17a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200">Information Update</h3>
        <p class="mt-1 text-sm text-blue-700 dark:text-blue-300">
          This is an important update regarding your portfolio analytics. New features have been added to enhance your viewing experience. <a href="#" class="font-medium underline text-blue-800 dark:text-blue-200 hover:text-blue-900 dark:hover:text-blue-100">Learn More</a>.
        </p>
      </div>
      <div class="ml-4 flex-shrink-0">
        <button type="button" class="inline-flex rounded-md p-1.5 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-blue-950">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M6.293 6.293a1 1 0 011.414 0L10 8.586l2.293-2.293a1 1 0 111.414 1.414L11.414 10l2.293 2.293a1 1 0 01-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 01-1.414-1.414L8.586 10 6.293 7.707a1 1 0 010-1.414z" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Success Alert (Emerald Green) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-green-600 bg-green-50 dark:bg-green-950 dark:border-green-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-green-700 dark:text-green-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-green-800 dark:text-green-200">Portfolio Published!</h3>
        <p class="mt-1 text-sm text-green-700 dark:text-green-300">
          Great news! Your latest portfolio piece 'Project Aurora' has been successfully published and is now live for all to see. Congratulations!
        </p>
        <div class="mt-4">
          <div class="-mx-2 -my-1.5 flex">
            <button type="button" class="rounded-md bg-green-100 dark:bg-green-800 px-2 py-1.5 text-sm font-medium text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600 dark:focus:ring-offset-green-950">
              View Portfolio
            </button>
            <button type="button" class="ml-3 rounded-md bg-green-100 dark:bg-green-800 px-2 py-1.5 text-sm font-medium text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600 dark:focus:ring-offset-green-950">
              Share Link
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Warning Alert (Citrine/Amber) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-amber-600 bg-amber-50 dark:bg-amber-950 dark:border-amber-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-amber-700 dark:text-amber-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M8.257 3.328a1.5 1.5 0 013.486 0l4.316 6.302a1.5 1.5 0 01-1.317 2.37H5.258a1.5 1.5 0 01-1.317-2.37l4.316-6.302zM10 17a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-200">Attention Required</h3>
        <p class="mt-1 text-sm text-amber-700 dark:text-amber-300">
          Some of your image assets are exceeding recommended file sizes. This may impact load times for your portfolio.
        </p>
      </div>
    </div>
  </div>

  <!-- Error Alert (Ruby Red) -->
  <div class="p-4 rounded-lg shadow-md border border-red-600 bg-red-50 dark:bg-red-950 dark:border-red-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-red-700 dark:text-red-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-red-800 dark:text-red-200">Upload Failed</h3>
        <p class="mt-1 text-sm text-red-700 dark:text-red-300">
          There was an error uploading 'hero-banner.png'. The file type is not supported. Please try a JPG or WebP image.
        </p>
        <div class="mt-4">
          <div class="-mx-2 -my-1.5 flex">
            <button type="button" class="rounded-md bg-red-100 dark:bg-red-800 px-2 py-1.5 text-sm font-medium text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600 dark:focus:ring-offset-red-950">
              Retry Upload
            </button>
            <button type="button" class="ml-3 rounded-md bg-red-100 dark:bg-red-800 px-2 py-1.5 text-sm font-medium text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600 dark:focus:ring-offset-red-950">
              Contact Support
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Marketplace Alert Messages Component

A Material Design-inspired alert messages component with autumn colors, suitable for marketplace platforms. Features various alert types (success, warning, error, info) with dismissible options and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">

  <!-- Success Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100 ring-1 ring-green-200 dark:ring-green-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Success! Your listing has been published.</h3>
      <p class="text-sm opacity-90">Buyers can now view and purchase your amazing product. Good luck!</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-800 dark:text-green-300 dark:hover:bg-green-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100 ring-1 ring-yellow-200 dark:ring-yellow-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l8.601 15.354c.763 1.36-.217 3.047-1.748 3.047H1.404c-1.53 0-2.51-1.687-1.747-3.047l8.604-15.354zM11 15a1 1 0 11-2 0 1 1 0 012 0zm-1-6a1 1 0 00-1 1v3a1 1 0 102 0v-3a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Heads up! Some listings are missing images.</h3>
      <p class="text-sm opacity-90">Listings with images tend to have higher engagement. Please update them soon.</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-800 dark:text-yellow-300 dark:hover:bg-yellow-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-100 ring-1 ring-red-200 dark:ring-red-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-9a1 1 0 011-1h1.586l-.293-.293a1 1 0 011.414-1.414l2 2a1 1 0 010 1.414l-2 2a1 1 0 01-1.414-1.414l.293-.293H4a1 1 0 01-1-1zm11-1a1 1 0 00-1-1h-1.586l.293-.293a1 1 0 00-1.414-1.414l-2 2a1 1 0 000 1.414l2 2a1 1 0 001.414-1.414l-.293-.293H16a1 1 0 001-1z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Error! Publishing failed for item #12345.</h3>
      <p class="text-sm opacity-90">There was an issue processing your request. Please check your data and try again.</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-800 dark:text-red-300 dark:hover:bg-red-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

  <!-- Info Alert with Action Button (Autumn Colors) -->
  <div class="mb-6 flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-lg shadow-md bg-amber-100 dark:bg-amber-800 text-amber-900 dark:text-amber-100 ring-1 ring-amber-200 dark:ring-amber-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-0 sm:mr-3 mb-2 sm:mb-0 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Important Update: Our commission rates are changing.</h3>
      <p class="text-sm opacity-90">Starting November 1st, a new commission structure will be applied to all sales. Review the details to stay informed.</p>
    </div>
    <div class="flex items-center mt-3 sm:mt-0 ml-0 sm:ml-4 flex-shrink-0">
      <button type="button" class="bg-amber-700 hover:bg-amber-800 focus:ring-4 focus:ring-amber-300 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-amber-800 text-white font-medium rounded-lg text-sm px-4 py-2 text-center transition-colors duration-200 ease-in-out">View Details</button>
      <button type="button" class="ml-2 -mx-1.5 -my-1.5 bg-amber-100 text-amber-500 rounded-lg focus:ring-2 focus:ring-amber-400 p-1.5 hover:bg-amber-200 inline-flex h-8 w-8 dark:bg-amber-800 dark:text-amber-300 dark:hover:bg-amber-700" aria-label="Dismiss">
        <span class="sr-only">Dismiss</span>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>

</div>

Alert Messages Component

An alert messages component designed with a dark UI, autumn color scheme, suitable for professional consulting services. It is responsive and supports dark mode.

Open Preview

                <div class="p-4 sm:p-8 bg-gray-900 dark:bg-black min-h-screen font-sans">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-amber-500 mb-8 sm:mb-12 text-center">
    Consulting Service Alerts
  </h2>

  <div class="max-w-4xl mx-auto space-y-6 sm:space-y-8">

    <!-- Success Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-emerald-900/40 border border-emerald-700 dark:bg-emerald-950/60 dark:border-emerald-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-emerald-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-emerald-200 mb-1">Success! Your Request Has Been Processed.</h3>
        <p class="text-sm sm:text-base text-emerald-300 leading-relaxed">
          Thank you for choosing our consulting services. Your recent inquiry has been successfully submitted and our team will get back to you shortly.
        </p>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-emerald-400 hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Warning Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-orange-900/40 border border-orange-700 dark:bg-orange-950/60 dark:border-orange-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-orange-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" 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>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-orange-200 mb-1">Upcoming Changes to Our Service Offerings.</h3>
        <p class="text-sm sm:text-base text-orange-300 leading-relaxed">
          Please be aware of upcoming adjustments to our service packages starting next quarter. We encourage you to review the updated terms and conditions on our website.
        </p>
        <a href="#" class="text-sm sm:text-base text-orange-200 mt-2 inline-block underline hover:text-orange-100">Learn more about changes</a>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-orange-400 hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Information Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-blue-900/40 border border-blue-700 dark:bg-sky-950/60 dark:border-sky-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-blue-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-blue-200 mb-1">New Whitepaper Available: Future of Digital Consulting.</h3>
        <p class="text-sm sm:text-base text-blue-300 leading-relaxed">
          Explore our latest insights on the evolving landscape of digital consulting. Download our new whitepaper for free today!
        </p>
        <button class="mt-3 px-4 py-2 bg-blue-700 text-blue-100 rounded-md hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-gray-900 dark:focus:ring-offset-transparent text-sm sm:text-base">
          Download Now
        </button>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-blue-400 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Error Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-red-900/40 border border-red-700 dark:bg-red-950/60 dark:border-red-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-red-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-red-200 mb-1">Action Required: Incomplete Profile Information.</h3>
        <p class="text-sm sm:text-base text-red-300 leading-relaxed">
          Your user profile is incomplete. Please update your details to ensure uninterrupted access to all our premium consulting resources.
        </p>
        <a href="#" class="text-sm sm:text-base text-red-200 mt-2 inline-block underline hover:text-red-100">Update Profile</a>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-red-400 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

PlayfulForestAlert

A playful and cheerful alert messages component designed with a forest/green palette, rounded elements, and friendly aesthetics, suitable for business/corporate websites. It's responsive and includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl space-y-6">

    <!-- Success Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-green-500 dark:bg-green-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" 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>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Success! Your changes have been saved.</h3>
        <p class="text-sm text-green-700 dark:text-green-200">All systems are go. Enjoy a seamless experience.</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-green-600 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-100 dark:focus:ring-offset-green-800 transition-colors duration-200">
        <svg class="w-5 h-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>

    <!-- Info Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden" style="animation-delay: 0.1s;">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-blue-500 dark:bg-blue-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Heads Up! New updates available.</h3>
        <p class="text-sm text-blue-700 dark:text-blue-200">Check out our latest features and improvements.</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-blue-800 transition-colors duration-200">
        <svg class="w-5 h-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>

    <!-- Warning Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden" style="animation-delay: 0.2s;">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-yellow-500 dark:bg-yellow-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" 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>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Hey! Action needed soon.</h3>
        <p class="text-sm text-yellow-700 dark:text-yellow-200">Your subscription is about to expire. Renew now!</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-yellow-600 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-yellow-100 dark:focus:ring-offset-yellow-800 transition-colors duration-200">
        <svg class="w-5 h-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>

    <!-- Error Alert -->
    <div class="flex items-center p-4 pr-6 rounded-3xl shadow-xl bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-50 animate-fade-in-down transition-all duration-300 ease-in-out transform hover:scale-[1.01] overflow-hidden" style="animation-delay: 0.3s;">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-500 dark:bg-red-600 flex items-center justify-center mr-4 shadow-md">
        <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-bold mb-1">Oops! Something went wrong.</h3>
        <p class="text-sm text-red-700 dark:text-red-200">Please try again later or contact support.</p>
      </div>
      <button class="ml-4 p-2 rounded-full text-red-600 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-red-100 dark:focus:ring-offset-red-800 transition-colors duration-200">
        <svg class="w-5 h-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>
</div>

<style>
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out forwards;
  }
</style>

Playful_Alert_Messages_Component

A playful and professional alert messages component for music/audio platforms, featuring corporate blue tones, rounded elements, and full responsiveness with dark mode support.

Open Preview

                <div class="p-4 md:p-8 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 font-sans min-h-screen">

  <!-- Live/Now Playing Alert -->
  <div class="max-w-md mx-auto mb-6 bg-white dark:bg-gray-700 rounded-full shadow-lg p-3 flex items-center justify-between transition-all duration-300 ease-in-out hover:scale-105">
    <div class="flex items-center space-x-3">
      <div class="relative w-10 h-10">
        <img src="https://picsum.photos/id/1047/50/50" alt="Album Cover" class="w-full h-full object-cover rounded-full"/>
        <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-red-500 rounded-full animate-ping-slow"></div>
        <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-red-500 rounded-full"></div>
      </div>
      <div>
        <p class="text-sm font-semibold text-blue-800 dark:text-blue-200">Now Playing:</p>
        <p class="text-xs text-blue-600 dark:text-blue-300">"Groovy Tune" by Melodia Beats</p>
      </div>
    </div>
    <button class="p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-transform duration-200 transform hover:scale-110">
      <svg class="w-5 h-5 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
      </svg>
    </button>
  </div>

  <!-- Success Message -->
  <div class="max-w-md mx-auto mb-6 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 text-white p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:rotate-1 hover:scale-105">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">Awesome! Playback Started!</h3>
      <p class="text-sm opacity-90">Your selected track is now streaming. Enjoy the vibes!</p>
    </div>
  </div>

  <!-- Warning Message -->
  <div class="max-w-md mx-auto mb-6 bg-yellow-300 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:-rotate-1 hover:scale-105">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-yellow-700 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">Heads Up! Data Usage Alert!</h3>
      <p class="text-sm opacity-90">You're on a mobile network. Streaming high-quality audio might eat up your data plan.</p>
    </div>
  </div>

  <!-- Error Message with Retry -->
  <div class="max-w-md mx-auto mb-6 bg-red-400 dark:bg-red-700 text-white p-4 rounded-xl shadow-lg flex items-start md:items-center space-x-4 transition-all duration-300 ease-in-out hover:animate-shake">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="flex-grow">
      <h3 class="text-lg font-bold">Oops! Playback Failed.</h3>
      <p class="text-sm opacity-90 mb-2 md:mb-0">Couldn't load your track. Please check your internet connection.</p>
    </div>
    <button class="flex-shrink-0 bg-white dark:bg-gray-800 text-red-600 dark:text-red-300 px-4 py-2 rounded-full font-semibold text-sm shadow hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
      Retry
    </button>
  </div>

  <!-- Info Message -->
  <div class="max-w-md mx-auto mb-6 bg-blue-200 dark:bg-blue-900 text-blue-800 dark:text-blue-200 p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">New Feature: Shuffle Play!</h3>
      <p class="text-sm opacity-90">Discover personalized mixes with our new intelligent shuffle function.</p>
    </div>
  </div>

  <style>
  /* Custom keyframes for animation */
  @keyframes ping-slow {
    0% {
      transform: scale(0.6);
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }

  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  /* Keyframes for shake animation */
  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }

  .animate-shake {
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
  }
  </style>
</div>

OrganicNatureInspiredAlert

A simple, responsive alert messages component with an organic/nature-inspired design, complementary color scheme, suitable for consulting/services websites. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-emerald-50 to-blue-50 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">

  <!-- Success Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-green-50 dark:bg-green-900 border-l-4 border-green-400 dark:border-green-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-green-500 dark:text-green-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <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>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-green-800 dark:text-green-100">
          Successfully updated your profile.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-green-900 focus:ring-green-600 dark:focus:ring-green-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,0 100,20 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-green-400 dark:stroke-green-600"></path>
      </svg>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-orange-50 dark:bg-orange-900 border-l-4 border-orange-400 dark:border-orange-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-orange-500 dark:text-orange-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <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>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-orange-800 dark:text-orange-100">
          Your session will expire in 5 minutes.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-orange-500 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-orange-900 focus:ring-orange-600 dark:focus:ring-orange-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
     <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,80 100,60 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-orange-400 dark:stroke-orange-600"></path>
      </svg>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-red-50 dark:bg-red-900 border-l-4 border-red-400 dark:border-red-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-red-500 dark:text-red-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <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>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-red-800 dark:text-red-100">
          There was an error processing your request.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-red-500 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 dark:focus:ring-offset-red-900 focus:ring-red-600 dark:focus:ring-red-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,20 100,40 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-red-400 dark:stroke-red-600"></path>
      </svg>
    </div>
  </div>

  <!-- Information Alert -->
  <div class="mb-6 mx-auto max-w-xl bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-400 dark:border-blue-600 p-4 rounded-lg shadow-md overflow-hidden relative">
    <div class="flex items-center">
      <div class="flex-shrink-0 text-blue-500 dark:text-blue-300">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <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" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-blue-800 dark:text-blue-100">
          New service updates are available.
        </p>
      </div>
      <div class="ml-auto pl-3">
        <div class="-mx-1.5 -my-1.5">
          <button type="button" class="inline-flex rounded-md p-1.5 text-blue-500 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-blue-900 focus:ring-blue-600 dark:focus:ring-blue-400">
            <span class="sr-only">Dismiss</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- Decorative flowing lines -->
    <div class="absolute inset-0 pointer-events-none opacity-10">
      <svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
        <path d="M0,50 Q50,70 100,50 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-blue-400 dark:stroke-blue-600"></path>
      </svg>
    </div>
  </div>

</div>

Retro_Alert_Messages_Component

A simple, responsive alert messages component with a retro/vintage black, white, and neon accent color scheme, suitable for a dashboard. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">
  <div class="max-w-md mx-auto space-y-4">

    <!-- Success Alert -->
    <div class="relative p-4 border-2 border-green-500 bg-black text-green-500 shadow-neon-green overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-green-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <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"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Operation Success!</h3>
          <p class="text-sm">Your data has been successfully processed.</p>
        </div>
      </div>
    </div>

    <!-- Info Alert -->
    <div class="relative p-4 border-2 border-blue-500 bg-black text-blue-500 shadow-neon-blue overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-blue-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <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>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Information Update</h3>
          <p class="text-sm">New dashboard features are available for testing.</p>
        </div>
      </div>
    </div>

    <!-- Warning Alert -->
    <div class="relative p-4 border-2 border-yellow-500 bg-black text-yellow-500 shadow-neon-yellow overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-yellow-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <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"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">Caution Advised</h3>
          <p class="text-sm">Potential data discrepancies detected in report #345.</p>
        </div>
      </div>
    </div>

    <!-- Error Alert -->
    <div class="relative p-4 border-2 border-red-500 bg-black text-red-500 shadow-neon-red overflow-hidden">
      <div class="absolute inset-0 border-2 border-dashed border-red-500 animate-pulse-border"></div>
      <div class="flex items-center space-x-3 relative z-10">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <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"></path>
        </svg>
        <div>
          <h3 class="text-lg font-bold uppercase tracking-widest">System Error!</h3>
          <p class="text-sm">Failed to connect to the backend server. Please retry.</p>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  /* This is an example of including custom CSS for the retro effect within the HTML. */
  /* In a real scenario, this would ideally be in a separate CSS file or configured via Tailwind JIT/config */

  @keyframes pulse-border {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes glow {
    0% { filter: drop-shadow(0 0 0px var(--neon-color)); }
    100% { filter: drop-shadow(0 0 5px var(--neon-color)) drop-shadow(0 0 15px var(--neon-color)) drop-shadow(0 0 30px var(--neon-color)); }
  }

  .animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
  }

  /* Neon Glow Shadows (for retro effect) */
  .shadow-neon-green {
    --neon-color: theme('colors.green.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-blue {
    --neon-color: theme('colors.blue.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-yellow {
    --neon-color: theme('colors.yellow.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }
  .shadow-neon-red {
    --neon-color: theme('colors.red.500');
    animation: glow 1.5s ease-in-out infinite alternate;
  }

  /* Utility for dark mode background, not part of the component itself but for demonstration */
  body {
    transition: background-color 0.3s ease-in-out;
  }
  body.dark {
    background-color: theme('colors.gray.900');
  }
</style>

Search Components

Categories

Alert Messages