Components Alert Messages Glassmorphism Alert Message

Glassmorphism Alert Message

Glassmorphism Alert Message Component with a triadic color scheme and simple layout, designed for portfolios, with responsive design and dark mode support.

Preview

HTML Code

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-lg bg-opacity-30 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-30">
    <div class="absolute inset-0 rounded-lg -z-10 bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-60 dark:from-blue-700 dark:via-purple-700 dark:to-pink-700"></div>
    <div class="flex items-center space-x-4">
      <div class="flex items-center justify-center flex-shrink-0 w-10 h-10 text-white bg-blue-500 rounded-full dark:bg-blue-600">
        <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>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">New Portfolio Update!</h3>
        <p class="text-sm text-gray-600 dark:text-gray-200">Check out my latest projects and redesigned sections. Your feedback is highly appreciated!</p>
      </div>
    </div>
    <div class="flex justify-end mt-4">
      <button class="px-4 py-2 text-sm font-medium text-blue-800 bg-blue-100 rounded-md bg-opacity-70 dark:text-blue-200 dark:bg-blue-700 dark:bg-opacity-70">View Details</button>
      <button class="ml-2 px-4 py-2 text-sm font-medium text-gray-800 bg-gray-100 rounded-md bg-opacity-70 dark:text-gray-200 dark:bg-gray-700 dark:bg-opacity-70">Dismiss</button>
    </div>
  </div>
</div>

Related Components

Alert Messages Component

This component is an alert message with a minimalist/flat design, earth tones color scheme, and a complex layout. It is designed for social media interfaces and is responsive with dark theme support. It uses Tailwind CSS for styling and includes multiple interactive elements.

Open

Alert Messages Component

An alert message component with a retro/vintage design, including support for dark mode and responsiveness.

Open

Alert Messages Component

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

Open