Komponente "Warnmeldungen"
Bei dieser Komponente handelt es sich um eine Warnmeldung mit einem minimalistischen/flachen Design, einem Farbschema in Erdtönen und einem komplexen Layout. Es wurde für Social-Media-Schnittstellen entwickelt und ist reaktionsschnell mit Unterstützung für dunkle Themen. Es verwendet Tailwind CSS für das Styling und enthält mehrere interaktive Elemente.
HTML-Code
<div class="space-y-4 p-4 max-w-md mx-auto">
<!-- Success Alert -->
<div class="flex items-center p-4 bg-green-100 text-green-800 rounded-lg shadow-md dark:bg-green-700 dark:text-green-100" role="alert">
<svg class="w-6 h-6 mr-3" 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 class="font-bold">Success! Your post has been shared.</div>
<div class="text-sm">You've reached 120 new people.</div>
</div>
<button class="ml-auto text-green-800 dark:text-green-100 hover:text-green-600 dark:hover:text-green-300 focus:outline-none">
<svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Warning Alert -->
<div class="flex items-center p-4 bg-yellow-100 text-yellow-800 rounded-lg shadow-md dark:bg-yellow-700 dark:text-yellow-100" role="alert">
<svg class="w-6 h-6 mr-3" 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.332 16c-.77 1.333.192 3 1.732 3z"></path></svg>
<div>
<div class="font-bold">Warning: Some images failed to upload.</div>
<div class="text-sm">Please check your network connection.</div>
</div>
<button class="ml-auto text-yellow-800 dark:text-yellow-100 hover:text-yellow-600 dark:hover:text-yellow-300 focus:outline-none">
<svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Error Alert with Avatar -->
<div class="flex items-start p-4 bg-red-100 text-red-800 rounded-lg shadow-md dark:bg-red-700 dark:text-red-100" role="alert">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<div class="font-bold">Error: Message delivery failed.</div>
<div class="text-sm">User Verwandte Komponenten
Komponente "Warnmeldungen"
Responsive Alert Message Component mit Mikrointeraktionen, Pastell-Farbschema, komplexem Design, Geschäfts-/Unternehmenszweck, Unterstützung des Dunkelmodus und ohne JavaScript.
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 im Retro-/Vintage-Design, einschließlich Unterstützung für den Dunkelmodus und die Reaktionsfähigkeit.