CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Neumorphe Erfolgsmeldung"

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.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900">
  <div class="neumorphic-card bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg dark:shadow-none">
    <div class="flex items-center space-x-4">
      <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-500 text-white dark:bg-green-600">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
      </div>
      <div class="flex-1">
        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Success!</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your operation was completed successfully.</p>
      </div>
    </div>
  </div>
</div>

<style>
  .neumorphic-card {
    border-radius: 1rem;
    background: #e0e0e0;
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
    transition: all 0.3s ease;
  }

  .dark .neumorphic-card {
    background: #2d3748; /* dark gray */
    box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #4a5568;
  }

  .neumorphic-card:hover {
    box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  }
  
  .dark .neumorphic-card:hover {
    box-shadow: 4px 4px 8px #1a202c, -4px -4px 8px #4a5568;
  }
</style>

Verwandte Komponenten

Komponente "Erfolgsmeldungen"

Eine minimalistische Erfolgsnachrichtenkomponente mit responsiven Effekten, die sowohl helle als auch dunkle Themen mit Tailwind CSS unterstützt.

Offen

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.

Offen

Komponente "Erfolgsmeldungen"

Eine reaktionsschnelle Komponente für Erfolgsmeldungen, die im skeuomorphen Stil mit Tailwind CSS entworfen wurde und Unterstützung für dunkle Themen bietet.

Offen