Components Alert Messages Alert Messages Component

Alert Messages Component

A retro/vintage styled alert message component for business/corporate websites, featuring earth tones and responsive design with dark mode support.

Preview

HTML Code

<div class="max-w-md mx-auto p-4">
  </div>
  
  <div class="bg-stone-200 dark:bg-stone-800 p-4 rounded-lg shadow-md mb-4 border border-stone-300 dark:border-stone-700">
    <div class="flex items-center space-x-3">
      <div class="text-amber-600 dark:text-amber-400">
        <svg class="w-6 h-6" 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>
      <div>
        <h4 class="text-stone-800 dark:text-stone-200 text-lg font-semibold">Important Update</h4>
        <p class="text-stone-600 dark:text-stone-400 text-sm">Our terms of service have been updated. Please review the changes at your earliest convenience.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end space-x-3">
      <button class="px-4 py-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300">Dismiss</button>
      <button class="px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 transition duration-300">Learn More</button>
    </div>
  </div>
  
  <div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow-md mb-4 border border-green-300 dark:border-green-700">
    <div class="flex items-center space-x-3">
      <div class="text-green-700 dark:text-green-400">
        <svg class="w-6 h-6" 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>
      <div>
        <h4 class="text-green-800 dark:text-green-200 text-lg font-semibold">Success!</h4>
        <p class="text-green-600 dark:text-green-400 text-sm">Your profile has been updated successfully.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-green-300 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-md hover:bg-green-400 dark:hover:bg-green-600 transition duration-300">Close</button>
    </div>
  </div>

  <div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow-md mb-4 border border-red-300 dark:border-red-700">
    <div class="flex items-center space-x-3">
      <div class="text-red-700 dark:text-red-400">
        <svg class="w-6 h-6" 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>
      <div>
        <h4 class="text-red-800 dark:text-red-200 text-lg font-semibold">Error Occurred</h4>
        <p class="text-red-600 dark:text-red-400 text-sm">Failed to process your request. Please try again later.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-red-300 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-md hover:bg-red-400 dark:hover:bg-red-600 transition duration-300">Dismiss</button>
    </div>
  </div>

  <div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg shadow-md mb-4 border border-blue-300 dark:border-blue-700">
    <div class="flex items-center space-x-3">
      <div class="text-blue-700 dark:text-blue-400">
        <svg class="w-6 h-6" 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>
      <div>
        <h4 class="text-blue-800 dark:text-blue-200 text-lg font-semibold">Information</h4>
        <p class="text-blue-600 dark:text-blue-400 text-sm">You have 3 unread messages in your inbox.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-blue-300 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-300">View Messages</button>
    </div>
  </div>
</div>

Related Components

Alert Messages Component

Responsive Alert Message Component with Microinteractions, Pastel color scheme, Complex design, Business/Corporate purpose, Dark mode support, and No JavaScript.

Open

Alert Messages Component

A minimalist alert message component designed for blogs, featuring a grayscale color scheme. It includes a title, message, and close button. Responsive design with dark theme support.

Open

Alert Messages Component

An Alert Messages Component with a 3D design, responsive features, and dark theme support using Tailwind CSS. The component includes different alert types (success, error, warning, info) with icons and messages.

Open