Komponente "Warnmeldungen"
Eine Komponente für Warnmeldungen, die mit einer dunklen Benutzeroberfläche und einem herbstlichen Farbschema entwickelt wurde und für professionelle Beratungsdienste geeignet ist. Es ist reaktionsschnell und unterstützt den Dunkelmodus.
HTML-Code
<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>
Verwandte Komponenten
Komponente "Warnmeldungen"
Eine Komponente für reaktionsschnelle Warnmeldungen, die mit dem Glassmorphism-Effekt für E-Commerce-Zwecke entwickelt wurde. Es verfügt über ein einfaches Layout mit einem monochromatischen Farbschema und Unterstützung für den Dunkelmodus mit Tailwind CSS.
Retro_Alert_Messages_Component
Eine einfache, reaktionsschnelle Komponente für Warnmeldungen mit einem Retro-/Vintage-Farbschema in Schwarz, Weiß und Neon-Akzenten, die für ein Armaturenbrett geeignet ist. Enthält Unterstützung für den Dunkelmodus.
Komponente "Warnmeldungen"
Eine einfache, reaktionsschnelle Komponente für Graustufen-Warnmeldungen für E-Commerce-Websites mit Unterstützung für den Dunkelmodus.