Komponente "Erfolgsmeldungen"
Eine Komponente für Erfolgsmeldungen im 3D-Design-Stil mit responsiven Effekten und Unterstützung für dunkle Themen mit Platzhaltern für Bilder und Avatare.
HTML-Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md w-full transform transition-transform hover:scale-105">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/60/60" alt="Avatar" class="w-14 h-14 rounded-full shadow-md">
<div class="flex-1">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
<p class="text-gray-600 dark:text-gray-300">Your operation was completed successfully.</p>
</div>
</div>
<div class="mt-4 space-x-2">
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md shadow hover:bg-blue-500 transition duration-300">Okay</a>
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-300">Dismiss</a>
</div>
</div>
</div>Verwandte Komponenten
Komponente "Erfolgsmeldungen"
Eine reaktionsschnelle Komponente für Erfolgsmeldungen mit 3D-Designelementen und Unterstützung für dunkle Themen, die Tailwind CSS verwendet.
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.
Neumorphic_Charity_Success_Message
Eine einfache, reaktionsschnelle Erfolgsnachrichtenkomponente mit einem weichen neumorphen Stil und einem monochromen Farbschema, das für gemeinnützige und wohltätige Organisationen geeignet ist. Enthält Unterstützung für den Dunkelmodus.