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.
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
Komponente "Warnmeldungen"
Eine reaktionsschnelle Komponente für Warnmeldungen, die in einem minimalistischen/flachen Stil mit einem pastellfarbenen Farbschema gestaltet ist, geeignet für Social-Media-Schnittstellen und mit Unterstützung für dunkle Themen.
Komponente "Warnmeldungen"
Eine Komponente für Warnmeldungen mit 3D-Design, responsiven Funktionen und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS. Die Komponente enthält verschiedene Alarmtypen (Erfolg, Fehler, Warnung, Info) mit Symbolen und Meldungen.
Komponente "Marketplace-Warnmeldungen"
Eine von Material Design inspirierte Komponente für Warnmeldungen in Herbstfarben, die für Marktplatzplattformen geeignet ist. Bietet verschiedene Alarmtypen (Erfolg, Warnung, Fehler, Info) mit verwerfbaren Optionen und Unterstützung für den Dunkelmodus.