CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Erfolgsmeldungen"

Komponente "Erfolgsmeldungen"

Eine einfache und übersichtliche Erfolgsnachrichtenkomponente mit responsivem Design und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex items-center justify-between p-4 text-green-700 bg-green-100 rounded-lg dark:bg-green-700 dark:text-green-100" role="alert">
  <div class="flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-3" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
    </svg>
    <p class="font-bold">Success!</p>
    <p class="ml-2 text-sm">Your action was successful.</p>
  </div>
  <button type="button" class="text-green-700 hover:text-green-900 dark:text-green-100 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div>

Verwandte Komponenten

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.

Offen

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

SuccessMessagesComponent

Eine einfache Erfolgsnachrichtenkomponente für den E-Commerce mit einer monochromatischen Material Design-Ästhetik, einem responsiven Layout und Unterstützung für dunkle Themen.

Offen