CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Erfolgsmeldung Komponente - Material Design Komplementär

Erfolgsmeldung Komponente - Material Design Komplementär

Eine Erfolgsnachrichtenkomponente im Material Design-Stil für einen Blog/eine Content-Site unter Verwendung eines komplementären Farbschemas. Reaktionsschnell mit Unterstützung für dunkle Themen. Kein JavaScript.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="max-w-sm w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
    <div class="flex items-center mb-4">
      <div class="flex-shrink-0">
        <svg class="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
      </div>
      <div class="ml-3">
        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Success!</h3>
      </div>
    </div>
    <div class="mt-2">
      <p class="text-sm text-gray-500 dark:text-gray-300">
        Your action was completed successfully.
      </p>
    </div>
    <div class="mt-4">
      <button type="button" class="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900 border border-transparent rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
        Close
      </button>
    </div>
  </div>
</div>

Verwandte Komponenten

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.

Offen

Komponente "Erfolgsmeldungen"

Eine Komponente, die plakative Erfolgsbotschaften mit einem brutalistischen Designstil anzeigt, der sich durch hohen Kontrast, reaktionsschnelle Effekte und Unterstützung für dunkle Designs auszeichnet.

Offen

Komponente "Erfolgsmeldungen"

Eine reaktionsschnelle Komponente, die Erfolgsmeldungen in einem minimalistischen Stil anzeigt und sich für die Präsentation von Arbeiten oder Produkten mit Unterstützung für dunkle Themen eignet.

Offen