Popup-Benachrichtigungen

Komponente "Popup-Benachrichtigungen"

Eine neumorphe Popupbenachrichtigungskomponente mit Pastellfarben, responsivem Design und Unterstützung für dunkle Designs, die für Blogs und Inhaltswebsites geeignet ist.

Vorschau öffnen

                <div class="fixed bottom-5 right-5 z-50">
  <!-- Toast Notification 1 -->
  <div class="neumorphic-toast p-4 mb-3 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <img class="h-10 w-10 rounded-full" src="https://api.lorem.space/image/face?w=120&h=120" alt="Avatar">
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">John Doe commented on your post.</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">"Great article, very insightful!"</p>
      </div>
    </div>
  </div>

  <!-- Toast Notification 2 -->
  <div class="neumorphic-toast p-4 mb-3 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" 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">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Successfully saved your draft.</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your changes have been automatically saved.</p>
      </div>
    </div>
  </div>

  <!-- Toast Notification 3 -->
  <div class="neumorphic-toast p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Error: Unable to publish post.</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Please check your internet connection.</p>
      </div>
    </div>
  </div>
</div>

<style>
  .neumorphic-toast {
    background-color: #e0e5ec; /* Light pastel background */
  }

  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b8bcc4, -6px -6px 12px #ffffff;
  }

  .dark .neumorphic-toast {
    background-color: #2c2f33; /* Dark pastel background */
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #232528, -6px -6px 12px #35393e;
  }

  /* Responsive adjustments */
  @media (max-width: 640px) {
    .neumorphic-toast {
      margin-left: 1rem;
      margin-right: 1rem;
    }
  }
</style>

Komponente "Popup-Benachrichtigungen"

Eine Toast-Benachrichtigungskomponente im brutalistischen Stil mit Tailwind CSS, die für ein Portfolio entwickelt wurde, in dem Arbeiten oder Produkte präsentiert werden. Das Design enthält ein analoges Farbschema und unterstützt den Dunkelmodus mit einer komplexen Benutzeroberfläche.

Vorschau öffnen

                <div class="fixed top-4 right-4 z-50 space-y-4">
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-red-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Notification Title</h2>
                <p class="text-sm">This is a sample toast notification message that showcases important updates or alerts.</p>
            </div>
            <button class="ml-2 p-2 text-sm text-red-500 hover:bg-red-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-yellow-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Another Notification</h2>
                <p class="text-sm">This is another toast notification that provides insights or next steps for users.</p>
            </div>
            <button class="ml-2 p-2 text-sm text-yellow-500 hover:bg-yellow-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-blue-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Success Notification</h2>
                <p class="text-sm">Your latest action was successful. Keep up the great work!</p>
            </div>
            <button class="ml-2 p-2 text-sm text-blue-500 hover:bg-blue-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
</div>

Eine reaktionsschnelle, mit dunklem Design kompatible Toast-Benachrichtigungskomponente für den E-Commerce mit einem minimalistischen/flachen Design unter Verwendung eines komplementären Farbschemas.

Vorschau öffnen

                <div class="fixed bottom-4 right-4 space-y-2">

  <!-- Success Toast (Example) -->
  <div class="bg-green-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-green-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-6 w-6 mr-2" 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"></path>
        </svg>
        <div>
          <p class="font-bold">Success!</p>
          <p class="text-sm">Item added to cart successfully.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Error Toast (Example) -->
  <div class="bg-red-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-red-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l7-7m0 0l7 7m0-7l-7 7m7-7L7 7"></path>
        </svg>
        <div>
          <p class="font-bold">Error!</p>
          <p class="text-sm">Failed to add item to cart.</p>
        </div>
      </div>
    </div>
  </div>

    <!-- Info Toast (Example) -->
  <div class="bg-blue-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-blue-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
       <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4H12a9 9 0 007.562-3.438 9 9 0 000-10.124A9 9 0 0012 3a9 9 0 00-7.562 3.438A9 9 0 004.062 12a9 9 0 003.438 7.562z"></path>
        </svg>
        <div>
          <p class="font-bold">Info!</p>
          <p class="text-sm">Your item is being processed.</p>
        </div>
      </div>
    </div>
  </div>


</div>

Popup-Benachrichtigungen

Responsive Toast Notifications Component mit Glassmorphism-Stil für Business-/Corporate-Websites, die dunkles Design unterstützen. Pastellfarbenes Farbschema.

Vorschau öffnen

                <div class="fixed bottom-5 right-5 space-y-4 z-50">

  <!-- Success Toast -->
  <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-3">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-green-500" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div class="flex-1">
        <p class="text-sm font-medium text-gray-900 dark:text-white">Success Message</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Your action was successful.</p>
      </div>
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-3">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-blue-500" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div class="flex-1">
        <p class="text-sm font-medium text-gray-900 dark:text-white">Information</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">This is an informational message.</p>
      </div>
    </div>
  </div>

  <!-- Warning Toast -->
  <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-3">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-yellow-500" 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="M12 9v2m0 4h.01m-6.938 4H21a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
      </div>
      <div class="flex-1">
        <p class="text-sm font-medium text-gray-900 dark:text-white">Warning</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Something might be wrong.</p>
      </div>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-3">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-red-500" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div class="flex-1">
        <p class="text-sm font-medium text-gray-900 dark:text-white">Error</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">An error occurred.</p>
      </div>
    </div>
  </div>

</div>

Retro-Toast-Benachrichtigungen

Eine reaktionsschnelle Toast-Benachrichtigungskomponente mit Retro-/Vintage-Design, triadischem Farbschema und Unterstützung für den Dunkelmodus, die mit Tailwind CSS für die Portfolio-Verwendung erstellt wurde.

Vorschau öffnen

                <div class="fixed bottom-5 right-5 space-y-4">
  <!-- Success Toast -->
  <div class="bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Success!</div>
      <div class="text-sm">Item successfully added.</div>
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Information</div>
      <div class="text-sm">Your request is being processed.</div>
    </div>
  </div>

  <!-- Warning Toast -->
  <div class="bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
    <div>
      <div class="font-bold">Warning!</div>
      <div class="text-sm">Some issues were found.</div>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Error!</div>
      <div class="text-sm">Action could not be completed.</div>
    </div>
  </div>
</div>

Komponente "Popup-Benachrichtigungen"

Eine reaktionsschnelle Popup-Benachrichtigungskomponente mit Glassmorphism-Stil und lebendigem Farbschema, die für E-Commerce-Anwendungen geeignet ist. Es unterstützt ein dunkles Thema und verfügt über eine komplexe Benutzeroberfläche mit mehreren interaktiven Elementen.

Vorschau öffnen

                <div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
    <!-- Toast Notification -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="font-semibold text-vibrant-500 dark:text-vibrant-300">John Doe</p>
                <p class="text-gray-700 dark:text-gray-300">Your order has been shipped!</p>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
                &times;
            </button>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/400/200?random=1" alt="Product Image" class="w-full rounded-lg mb-2">
            <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name</p>
            <p class="text-gray-600 dark:text-gray-400">Price: $29.99</p>
            <button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
                View Order
            </button>
        </div>
    </div>
</div>

<!-- Toast Notification (Alternate) -->
<div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="font-semibold text-vibrant-500 dark:text-vibrant-300">Jane Smith</p>
                <p class="text-gray-700 dark:text-gray-300">You have a new message!</p>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
                &times;
            </button>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-700">
            <p class="font-semibold text-gray-800 dark:text-gray-200">Check your inbox for more details.</p>
            <button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
                View Messages
            </button>
        </div>
    </div>
</div>

Popup-Benachrichtigungen

Minimalistische/flache Design-Toast-Benachrichtigungskomponente mit analogem Farbschema, einfacher Komplexität, für Portfoliozwecke. Reaktionsschnell mit Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="fixed bottom-4 right-4 space-y-2">
  <!-- Success Toast -->
  <div class="bg-green-500 dark:bg-green-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
    </div>
    <div>
      <p class="font-bold">Success!</p>
      <p>Your action was completed successfully.</p>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-500 dark:bg-red-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <p class="font-bold">Error!</p>
      <p>Something went wrong. Please try again.</p>
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <p class="font-bold">Information</p>
      <p>This is an informational message.</p>
    </div>
  </div>
</div>

Komponente "Popup-Benachrichtigungen"

Eine minimalistische und lebendige Toast-Benachrichtigungskomponente mit Tailwind CSS. Die Komponente ist mit einem einfachen Layout für Portfolios konzipiert, unterstützt den Dunkelmodus und reagiert ohne JavaScript.

Vorschau öffnen

                <div class="fixed bottom-5 right-5 space-y-4">
  <!-- Toast Notification -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md flex items-center justify-between">
    <div class="flex items-center">
      <div class="flex-shrink-0 bg-green-500 rounded-full p-1">
        <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-800 dark:text-white">Success!</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Your action was successful.</p>
      </div>
    </div>
    <button class="ml-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
      <svg class="h-5 w-5" 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"></path>
      </svg>
    </button>
  </div>

  <!-- Another Toast Notification (Example) -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md flex items-center justify-between">
    <div class="flex items-center">
      <div class="flex-shrink-0 bg-blue-500 rounded-full p-1">
        <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-800 dark:text-white">Info</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">This is an informational message.</p>
      </div>
    </div>
    <button class="ml-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
      <svg class="h-5 w-5" 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"></path>
      </svg>
    </button>
  </div>
</div>

Komponente "Popup-Benachrichtigungen"

Eine Toast-Benachrichtigungskomponente im Glassmorphism-Stil mit Pastellfarben, die für Blogs und den Konsum von Inhalten entwickelt wurde. Es unterstützt den Dunkelmodus und verfügt über eine umfangreiche Benutzeroberfläche mit interaktiven Elementen.

Vorschau öffnen

                <div class="fixed bottom-5 right-5 z-50 space-y-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Title</h4>
        <p class="text-gray-600 dark:text-gray-400">This is a brief message for a toast notification.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">5 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Notification</h4>
        <p class="text-gray-600 dark:text-gray-400">Here is another message for your consideration.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">10 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Important Alert</h4>
        <p class="text-gray-600 dark:text-gray-400">This is an important alert that requires your attention.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">15 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>
</div>

Komponente "Popup-Benachrichtigungen"

Eine Popupbenachrichtigungskomponente im Dunkelmodus, die für Dashboard-Anwendungen entwickelt wurde und ein komplementäres Farbschema mit verschiedenen interaktiven Elementen bietet.

Vorschau öffnen

                <div class="fixed bottom-5 right-5 space-y-4">
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">John Doe</p>
            <p class="text-sm">Successfully completed the action.</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            Dismiss
        </button>
    </div>
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">Jane Smith</p>
            <p class="text-sm">You have new messages.</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            View
        </button>
    </div>
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">Mike Johnson</p>
            <p class="text-sm">Error occurred during processing!</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            Retry
        </button>
    </div>
</div>

Kategorien

Popup-Benachrichtigungen