CCHub Logo CCHub Tailwind Collection
Komponenten Benachrichtigungen Komponente "Benachrichtigungen"

Komponente "Benachrichtigungen"

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

Vorschau

HTML-Code 

<div class="dark:bg-gray-900 bg-gray-100 p-6 rounded-lg shadow-lg relative overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 opacity-20 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900"></div>
  <div class="relative z-10">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Notifications</h2>
    <div class="space-y-4">
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">New message received.</p>
        </div>
      </div>
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
        </div>
      </div>
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your photo.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Benachrichtigungen"

Eine einfache, reaktionsschnelle Benachrichtigungskomponente mit Unterstützung für den Dunkelmodus, die in einem Skeuomorphen Stil mit einem Graustufen-Farbschema gestaltet ist. Ideal für ein Portfolio, um minimale Designfähigkeiten zu demonstrieren.

Offen

Komponente "Benachrichtigungen"

Komponente "Responsive Notifications" mit Unterstützung des Dunkelmodus für das Dashboard

Offen

Komponente "Benachrichtigungen"

Eine komplexe, reaktionsschnelle Benachrichtigungskomponente mit Unterstützung des Dunkelmodus, die nach den Prinzipien des Material Designs und einem pastellfarbenen Farbschema für einen Blog/eine Content-Website entwickelt wurde.

Offen