Komponente "Warnmeldungen"
Komponente "Warnmeldungen" mit dem Materialdesign-Stil, dem Pastellfarbschema und dem komplexen Komplexitätsgrad für Portfoliozwecke. Responsives Design mit Unterstützung für dunkle Themen. Kein JavaScript-Code erforderlich, nur HTML mit Tailwind-Klassen. Im Dunkelmodus wird das Präfix dark: von Tailwind für das Styling verwendet. Bilder verwenden picsum.photos für Bilder und randomuser.me für Avatare.
HTML-Code
<div class="container mx-auto p-4">
<!-- Success Alert -->
<div class="flex items-center bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
<p class="text-sm">Success! Your action was completed.</p>
</div>
<!-- Info Alert -->
<div class="flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
<p class="text-sm">Information: This is an important message.</p>
</div>
<!-- Warning Alert -->
<div class="flex items-center bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
<p class="text-sm">Warning: Something needs your attention.</p>
</div>
<!-- Danger Alert -->
<div class="flex items-center bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 px-4 py-3 rounded shadow-md" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94z"/></svg>
<p class="text-sm">Error: Something went wrong.</p>
</div>
</div>Verwandte Komponenten
Monospace_Developer_Alert_Messages_Component
Eine komplexe, von Monospace inspirierte Komponente für Warnmeldungen mit einem Farbschema in Schwarz, Weiß und Akzenten, die für die Nutzung von Blogs und Inhalten entwickelt wurde. Beinhaltet Unterstützung für responsives Design und Dunkelmodus.
Komponente "Warnmeldungen"
Eine Warnmeldungskomponente im Retro-/Vintage-Stil für Geschäfts-/Unternehmenswebsites mit Erdtönen und responsivem Design mit Unterstützung für den Dunkelmodus.
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.