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 Komponente zum Anzeigen von Erfolgsmeldungen mit einem 3D-Designstil, responsiven Effekten und Unterstützung für dunkle Designs mithilfe von Tailwind CSS.
Komponente "Erfolgsmeldungen"
Eine reaktionsschnelle Komponente für Erfolgsmeldungen, die für den Dunkelmodus mit einem lebendigen Farbschema entwickelt wurde und sich ideal für die Präsentation von Arbeiten in einem Portfolio eignet.
Komponente "Erfolgsmeldungen"
Success Messages Component mit Neumorphism-Design, Responsive- und Dark-Theme-Unterstützung