CCHub Logo CCHub Tailwind Collection
Komponenten Fehlermeldungen Komponente "Fehlermeldungen"

Komponente "Fehlermeldungen"

Diese Komponente zeigt Fehlermeldungen mit ansprechenden Animationen an, die auf Benutzeraktionen reagieren. Es unterstützt den Dunkelmodus und bietet reaktionsschnelle Effekte mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="max-w-md w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 transition duration-300 hover:shadow-xl transform hover:-translate-y-1">
    <div class="flex items-center mb-4">
      <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Error Title</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-4">
      This is an error message that explains what went wrong. Please check your input and try again.
    </p>
    <div class="flex items-center justify-between mt-4">
      <button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
      <button class="px-4 py-2 bg-red-500 text-white font-semibold rounded-md hover:bg-red-600 transition duration-200 dark:bg-red-700 dark:hover:bg-red-800">Cancel</button>
    </div>
    <img class="mt-4 w-full h-32 object-cover rounded" src="https://picsum.photos/400/200?random=1" alt="Error Illustration">
  </div>
</div>

Verwandte Komponenten

Komponente "Fehlermeldungen"

Eine reaktionsschnelle Fehlermeldungskomponente, die mit einem 3D-Stil und einem monochromatischen Farbschema entworfen wurde. Geeignet für ein Portfolio mit interaktiven Elementen zur Benutzerbindung.

Offen

Komponente "Fehlermeldungen"

Eine reaktionsschnelle Fehlermeldungskomponente, die im Brutalismus-Stil mit Tailwind CSS gestaltet wurde und sich durch hohen Kontrast, ungewöhnliche Layouts und Unterstützung für den Dunkelmodus auszeichnet.

Offen

Komponente "Fehlermeldungen"

Eine reaktionsschnelle Fehlermeldungskomponente, die für Schnittstellen in sozialen Netzwerken entwickelt wurde und einen Dunkelmodus und ein Graustufen-Farbschema mit Tailwind CSS verwendet.

Offen