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.
HTML-Code
<div class="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50?random=1" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 shadow-lg dark:shadow-xl">
<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-400">Your action was completed successfully.</p>
</div>
</div>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<span class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</span>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">View Details</a>
</div>
</div>Verwandte Komponenten
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.
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 minimalistische/flache Design-Komponente für Erfolgsnachrichten für soziale Medien mit hellen Pastellfarben und einem komplexen, responsiven Layout.