Komponenten Warnmeldungen Glassmorphism-Warnmeldung

Glassmorphism-Warnmeldung

Glassmorphism Alert Message Component mit einem triadischen Farbschema und einfachem Layout, entwickelt für Portfolios, mit responsivem Design und Unterstützung für den Dunkelmodus.

Vorschau

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>

Verwandte Komponenten

PlayfulForestAlarm

Eine verspielte und fröhliche Komponente für Warnmeldungen, die mit einer Wald-/Grünpalette, abgerundeten Elementen und einer freundlichen Ästhetik gestaltet wurde und für Geschäfts-/Unternehmenswebsites geeignet ist. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen

Komponente "Warnmeldungen"

Eine Komponente für reaktionsschnelle Warnmeldungen im Dunkelmodus zur Präsentation von Benachrichtigungen oder Nachrichten in einem Portfolio, die mit Erdtönen und mehreren interaktiven Elementen gestaltet ist.

Offen

Komponente "Warnmeldungen"

Eine komplexe, reaktionsschnelle Komponente für Warnmeldungen, die nach den Prinzipien des Material Designs entwickelt wurde, Ozean-/Blautöne verwendet und für gemeinnützige/wohltätige Websites geeignet ist. Enthält mehrere Warnungstypen, Verwerfungsfunktionen und Unterstützung für den Dunkelmodus.

Offen