CCHub Logo CCHub Tailwind Collection
Komponenten Benachrichtigungen Komponente "Benachrichtigungen"

Komponente "Benachrichtigungen"

Eine reaktionsschnelle Benachrichtigungskomponente, die im Dunkelmodus mit Tailwind CSS entwickelt wurde.

Vorschau

HTML-Code 

<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-md mx-auto">
  <h2 class="text-xl font-semibold mb-4">Notifications</h2>
  <div class="space-y-4">
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">John Doe</p>
        <p>Just completed a new task.</p>
        <span class="text-gray-400 text-sm">10 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Jane Smith</p>
        <p>Commented on your post.</p>
        <span class="text-gray-400 text-sm">20 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Michael Brown</p>
        <p>Sent you a friend request.</p>
        <span class="text-gray-400 text-sm">30 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Emily Davis</p>
        <p>Liked your photo.</p>
        <span class="text-gray-400 text-sm">1 hour ago</span>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Benachrichtigungen"

Eine Benachrichtigungskomponente mit einem glasmorphischen Design mit einem monochromatischen Farbschema, das auf Geschäfts-/Unternehmenswebanwendungen zugeschnitten ist. Die Komponente enthält verschiedene interaktive Elemente und unterstützt den Dunkelmodus.

Offen

Komponente "Benachrichtigungen"

Eine reaktionsschnelle Benachrichtigungskomponente, die mit skeuomorphen Elementen entwickelt wurde, ein komplementäres Farbschema und ein einfaches Layout verwendet, das für ein Portfolio geeignet ist.

Offen

Komponente "Benachrichtigungen"

Eine reaktionsschnelle Benachrichtigungskomponente mit 3D-Design, einfachem Graustufenlayout und Unterstützung für dunkle Themen, die für Unternehmenswebsites geeignet ist.

Offen