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"
Eine komplexe, lebendige Warnmeldungskomponente im Glassmorphism-Stil für den E-Commerce mit Unterstützung für den Dunkelmodus.
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.
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.