Komponente "Erfolgsmeldungen"
Erfolgsmeldungen-Komponente mit Dunkelmodus - Bietet reaktionsschnelle Effekte und Unterstützung für dunkle Themen. Es wird kein JavaScript-Code benötigt. Für den Dunkelmodus ist CSS-Unterstützung ausreichend.
HTML-Code
<div class="flex items-center justify-center h-screen bg-zinc-950">
<div class="relative px-4 py-3 pr-10 text-teal-500 bg-teal-900 rounded-lg shadow-md" role="alert">
<strong class="font-bold select-none">Success!</strong>
<span class="block sm:inline select-none">Your action was successful.</span>
<span class="absolute top-0 bottom-0 right-0 flex items-center px-4 py-3">
<svg class="w-6 h-6 fill-current" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<title>Close</title>
<path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15L6.342 6.342a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</span>
</div>
</div>Verwandte Komponenten
Komponente "Erfolgsmeldungen"
Eine einfache Erfolgsnachrichtenkomponente mit einem pastellfarbenen Farbschema, subtilen Animationen für Mikrointeraktionen und responsivem Design mit Unterstützung für dunkle Themen. Es ist für ein Portfolio konzipiert, um Benutzeraktionen zu bestätigen.
Erfolgsbotschaft des Art déco
Eine vom Art Deco inspirierte Erfolgsbotschaft mit einer Retro-/Vintage-Farbpalette, die für Unterhaltungs-/Medienplattformen entwickelt wurde. Es verfügt über geometrische Muster, luxuriöses Design und ist mit Unterstützung des Dunkelmodus vollständig reaktionsschnell.
Erfolgsmeldungen-Komponente - Immobilien Dark Mode Candy Colors
Eine Erfolgsnachrichtenkomponente für Immobilienplattformen, die mit dunklem Hintergrund, fröhlichen Bonbonfarben (Kaugummirosa, Mintgrün) und Reaktionsfähigkeit für alle Bildschirmgrößen, einschließlich Unterstützung des Dunkelmodus, gestaltet ist.