Komponente "Erfolgsmeldungen"
Eine minimalistische Erfolgsnachrichtenkomponente mit responsiven Effekten, die sowohl helle als auch dunkle Themen mit Tailwind CSS unterstützt.
HTML-Code
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="flex items-center p-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
<p class="text-gray-600 dark:text-gray-400">Your action was completed successfully. Thank you for your participation!</p>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Success Image">
</div>
<div class="p-4">
<button class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring focus:ring-green-300 dark:focus:ring-green-600">Okay</button>
</div>
</div>Verwandte Komponenten
Komponente "Erfolgsmeldungen"
Eine minimalistische/flache Design-Komponente für Erfolgsnachrichten für soziale Medien mit hellen Pastellfarben und einem komplexen, responsiven Layout.
Erfolgsmeldungen Komponente 17
Eine fette und rohe Komponente für Erfolgsmeldungen, die mit Tailwind CSS entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Themen bietet.
Komponente "Erfolgsmeldungen"
Eine reaktionsschnelle Komponente für Erfolgsmeldungen, die von Material Design inspiriert ist und Unterstützung für Erdtöne und dunkle Themen bietet, die für den Konsum von Inhalten entwickelt wurde.