CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Erfolgsmeldungen"

Komponente "Erfolgsmeldungen"

Success Messages Component mit Neumorphism-Design, Responsive- und Dark-Theme-Unterstützung

Vorschau

HTML-Code 

<div class="flex items-center justify-center h-screen dark:bg-gray-900">
  <div class="bg-gray-200 p-6 rounded-xl shadow-xl s Neumorphism dark:bg-gray-800">
    <div class="text-green-500 text-2xl mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" 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>
    <h3 class="text-xl font-semibold mb-2 dark:text-white">Success!</h3>
    <p class="text-gray-600 dark:text-gray-300">Your action was performed successfully.</p>
  </div>
</div>

Verwandte Komponenten

Komponente "Erfolgsmeldungen"

Eine Komponente für Erfolgsmeldungen im 3D-Design-Stil mit responsiven Effekten und Unterstützung für dunkle Themen mit Platzhaltern für Bilder und Avatare.

Offen

Komponente "Neumorphe Erfolgsmeldung"

Eine einfache Neumorphic Success Message-Komponente mit einem komplementären Farbschema für ein Dashboard, mit responsivem Design und Unterstützung für den Dunkelmodus.

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