Search Components

Notifications

Small widgets that alert users to information

Notifications Component

A complex, responsive notifications component designed with Material Design principles, cool neutral colors, and dark mode support, suitable for a portfolio to showcase interactive elements and depth effects.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased">
    <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Notifications</h2>
            <div class="flex space-x-2">
                <button class="px-4 py-2 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
                    Mark all as read
                </button>
                <button class="p-2 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                    </svg>
                </button>
            </div>
        </div>

        <div class="divide-y divide-gray-200 dark:divide-gray-700">
            <!-- Notification Item 1 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-blue-50 dark:bg-gray-800/50 hover:bg-blue-100 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
                    <span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-blue-500"></span>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="font-bold">Alice Johnson</span> commented on your <span class="text-blue-600 dark:text-blue-400 font-medium">post</span>.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">2h ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        "Great insights! I particularly liked your point about the new design trends..."
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-blue-600 dark:text-blue-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Reply</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Dismiss</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 2 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <div class="h-12 w-12 rounded-full bg-green-500 flex items-center justify-center shadow-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" 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>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            Your portfolio project <span class="text-indigo-600 dark:text-indigo-400 font-medium">'Modern Dashboard'</span> was approved!
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        Congratulations! Your project is now live and visible to the community.
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">View Project</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">Share</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 3 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="font-bold">Sarah Lee</span> sent you a <span class="text-purple-600 dark:text-purple-400 font-medium">private message</span>.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">3 days ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        "Hi! I saw your work on the Material Design component and wanted to ask about..."
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-purple-600 dark:text-purple-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">View Message</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">Archive</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 4 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <div class="h-12 w-12 rounded-full bg-red-500 flex items-center justify-center shadow-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 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" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="text-red-600 dark:text-red-400 font-medium">Warning:</span> Some assets failed to load for 'Photography Showcase'.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">5 days ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        Please check the console for more details. This might affect the display of your project.
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-red-600 dark:text-red-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Resolve Issue</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Ignore</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 5 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out last:rounded-b-lg">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://picsum.photos/id/1005/60/60" alt="System Icon">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            New <span class="text-cyan-600 dark:text-cyan-400 font-medium">feature update</span> available for the editor.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">1 week ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        We've added new collaboration tools and improved performance. Update now to experience!
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-cyan-600 dark:text-cyan-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Learn More</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Dismiss</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Notifications Component

A simple, clean, and high-contrast notifications component suitable for corporate/professional booking and reservation systems, with full responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-start justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 ease-in-out">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">Notifications</h2>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Your latest updates regarding bookings and appointments.</p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">

      <!-- Notification Item 1 -->
      <div class="p-4 sm:p-6 flex items-start gap-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200">
        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-200 flex items-center justify-center text-lg">
          <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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
        </div>
        <div class="flex-grow">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Appointment Confirmed</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Your appointment with Dr. Smith on Oct 26, 2023 at 10:00 AM has been confirmed.</p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="p-4 sm:p-6 flex items-start gap-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200">
        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-200 flex items-center justify-center text-lg">
          <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="M5 13l4 4L19 7"></path>
          </svg>
        </div>
        <div class="flex-grow">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Booking Completed</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Your 'Premium Suite' reservation for Nov 1-3, 2023 is successfully booked.</p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="p-4 sm:p-6 flex items-start gap-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200">
        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-200 flex items-center justify-center text-lg">
          <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="flex-grow">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Booking Reminder</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Don't forget your upcoming reservation for the 'Conference Room A' on Oct 28 at 2:00 PM.</p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">3 days ago</p>
        </div>
      </div>

    </div>

    <div class="p-4 sm:p-6 flex justify-center">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium text-sm transition-colors duration-200">
        View all notifications
      </a>
    </div>
  </div>
</div>

Brutalist_Industrial_Notifications_Component

A complex, brutalist-style notifications component for industrial and manufacturing applications, featuring a sunset/warm color scheme, responsiveness, and dark mode support.

Open Preview

                <div class="font-sans bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-start justify-center">
  <div class="w-full max-w-6xl bg-red-600 dark:bg-red-800 border-4 border-solid border-amber-900 dark:border-amber-700 shadow-brutal dark:shadow-brutal-dark p-4 sm:p-6 md:p-8 relative overflow-hidden">
    <!-- Top brutalist border/bar -->
    <div class="absolute top-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-b-4 border-solid border-amber-900 dark:border-amber-700 transform skew-y-2"></div>
    <div class="absolute bottom-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-t-4 border-solid border-amber-900 dark:border-amber-700 transform -skew-y-2"></div>

    <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold uppercase text-amber-100 dark:text-amber-200 mb-6 sm:mb-8 tracking-wider text-shadow-brutal dark:text-shadow-brutal-darker pt-4">
      <span class="block transform -skew-x-6 inline-block bg-amber-900 dark:bg-red-900 px-4 py-2 border-2 border-amber-500 dark:border-amber-600">System Alerts</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 md:gap-10 pb-4">
      <!-- Left Filter/Controls Panel -->
      <div class="md:col-span-1 bg-amber-900 dark:bg-red-900 p-4 sm:p-6 border-4 border-solid border-amber-700 dark:border-amber-600 space-y-6">
        <div class="flex items-center justify-between text-amber-100 dark:text-amber-200 mb-4">
          <h3 class="text-xl md:text-2xl font-bold uppercase tracking-wider">Filter</h3>
          <button class="px-3 py-1 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-sm transform -skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200">
            Reset
          </button>
        </div>

        <!-- Filter Options -->
        <div>
          <label for="alert-type" class="block text-amber-200 dark:text-amber-300 text-sm font-bold mb-2 uppercase tracking-wide">Severity:</label>
          <select id="alert-type" class="w-full p-2 bg-amber-800 dark:bg-red-800 text-amber-100 dark:text-amber-200 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring focus:ring-amber-400 dark:focus:ring-orange-500 focus:border-amber-400 dark:focus:border-orange-500 appearance-none">
            <option value="all">All</option>
            <option value="critical">Critical</option>
            <option value="warning">Warning</option>
            <option value="info">Info</option>
          </select>
        </div>

        <div>
          <label for="status" class="block text-amber-200 dark:text-amber-300 text-sm font-bold mb-2 uppercase tracking-wide">Status:</label>
          <select id="status" class="w-full p-2 bg-amber-800 dark:bg-red-800 text-amber-100 dark:text-amber-200 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring focus:ring-amber-400 dark:focus:ring-orange-500 focus:border-amber-400 dark:focus:border-orange-500 appearance-none">
            <option value="all">All</option>
            <option value="new">New</option>
            <option value="acknowledged">Acknowledged</option>
            <option value="resolved">Resolved</option>
          </select>
        </div>

        <div class="flex items-center">
          <input id="show-archived" type="checkbox" class="h-5 w-5 text-amber-500 dark:text-orange-500 bg-amber-800 dark:bg-red-800 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring-amber-400 dark:focus:ring-orange-500">
          <label for="show-archived" class="ml-2 text-amber-200 dark:text-amber-300 uppercase text-sm font-bold">Show Archived</label>
        </div>

        <button class="w-full px-4 py-2 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-lg transform skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200 mt-4 md:mt-6">
          Apply Filters
        </button>
      </div>

      <!-- Main Notifications List -->
      <div class="md:col-span-2 space-y-6 sm:space-y-8">
        <!-- Notification Card 1: Critical -->
        <div class="bg-orange-400 dark:bg-orange-600 p-4 sm:p-5 border-4 border-solid border-red-900 dark:border-red-700 transform rotate-1 shadow-brutal-inner dark:shadow-brutal-inner-dark relative hover:scale-[1.01] transition-transform duration-200 ease-out">
          <div class="absolute -top-3 -right-3 text-red-900 dark:text-red-950 text-6xl opacity-20 transform rotate-45 font-black z-0">!</div>
          <div class="relative z-10">
            <h4 class="text-xl sm:text-2xl font-bold uppercase text-red-900 dark:text-red-950 mb-2 border-l-4 border-red-900 dark:border-red-950 pl-3 leading-tight">CRITICAL: Machine ID 789-A Shutdown</h4>
            <p class="text-red-800 dark:text-red-900 text-sm sm:text-base mb-3">Main hydraulic pump pressure failure detected. Immediate attention required to prevent further system damage.</p>
            <div class="flex flex-wrap items-center justify-between text-sm text-red-700 dark:text-red-800 mb-3">
              <span class="font-semibold">Source: Assembly Line 3</span>
              <span class="truncate">Timestamp: 2024-07-26 14:35 UTC</span>
            </div>
            <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
              <a href="#" class="inline-block px-4 py-2 bg-red-700 dark:bg-red-800 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-red-900 dark:border-red-950 transform skew-x-3 hover:bg-red-600 dark:hover:bg-red-700 transition-colors duration-200 flex-grow text-center">
                Acknowledge
              </a>
              <a href="#" class="inline-block px-4 py-2 bg-amber-900 dark:bg-red-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-700 dark:border-amber-600 transform -skew-x-3 hover:bg-amber-800 dark:hover:bg-red-800 transition-colors duration-200 flex-grow text-center">
                View Details
              </a>
            </div>
          </div>
        </div>

        <!-- Notification Card 2: Warning -->
        <div class="bg-amber-500 dark:bg-amber-700 p-4 sm:p-5 border-4 border-solid border-orange-900 dark:border-orange-700 transform -rotate-1 shadow-brutal-inner dark:shadow-brutal-inner-dark relative hover:scale-[1.01] transition-transform duration-200 ease-out">
          <div class="absolute -bottom-3 -left-3 text-orange-900 dark:text-orange-950 text-6xl opacity-20 transform -rotate-45 font-black z-0">&#9763;</div>
          <div class="relative z-10">
            <h4 class="text-xl sm:text-2xl font-bold uppercase text-orange-900 dark:text-orange-950 mb-2 border-l-4 border-orange-900 dark:border-orange-950 pl-3 leading-tight">WARNING: Conveyor Belt 2 Speed Anomaly</h4>
            <p class="text-orange-800 dark:text-orange-900 text-sm sm:text-base mb-3">Fluctuations detected in Conveyor Belt 2 speed. Potential for material backlog. Monitor closely.</p>
            <div class="flex flex-wrap items-center justify-between text-sm text-orange-700 dark:text-orange-800 mb-3">
              <span class="font-semibold">Source: Logistics Hub</span>
              <span>Timestamp: 2024-07-26 15:10 UTC</span>
            </div>
            <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
              <a href="#" class="inline-block px-4 py-2 bg-red-700 dark:bg-red-800 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-red-900 dark:border-red-950 transform skew-x-3 hover:bg-red-600 dark:hover:bg-red-700 transition-colors duration-200 flex-grow text-center">
                Acknowledge
              </a>
              <a href="#" class="inline-block px-4 py-2 bg-amber-900 dark:bg-red-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-700 dark:border-amber-600 transform -skew-x-3 hover:bg-amber-800 dark:hover:bg-red-800 transition-colors duration-200 flex-grow text-center">
                View Details
              </a>
            </div>
          </div>
        </div>

        <!-- Notification Card 3: Info (Acknowledged/Resolved style) -->
        <div class="bg-red-700 dark:bg-red-900 p-4 sm:p-5 border-4 border-solid border-amber-800 dark:border-amber-600 filter grayscale opacity-75 transform rotate-2 shadow-brutal-inner dark:shadow-brutal-inner-dark relative">
          <div class="absolute -top-3 -left-3 text-amber-900 dark:text-orange-950 text-6xl opacity-20 transform rotate-12 font-black z-0">i</div>
          <div class="relative z-10">
            <h4 class="text-xl sm:text-2xl font-bold uppercase text-amber-100 dark:text-amber-200 mb-2 border-l-4 border-amber-100 dark:border-amber-200 pl-3 leading-tight">INFO: Firmware Update Completed for Robot Arm 5</h4>
            <p class="text-amber-200 dark:text-amber-300 text-sm sm:text-base mb-3">Scheduled firmware update for Robot Arm 5 in Welding Station 1 completed successfully.</p>
            <div class="flex flex-wrap items-center justify-between text-sm text-amber-300 dark:text-amber-400">
              <span class="font-semibold">Source: IT Department</span>
              <span>Timestamp: 2024-07-25 09:00 UTC</span>
            </div>
            <div class="mt-4 flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
              <span class="inline-block px-4 py-2 bg-orange-800 dark:bg-amber-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-100 dark:border-amber-200 transform -skew-x-3 flex-grow text-center">Status: Resolved</span>
            </div>
          </div>
        </div>

        <!-- Empty State / Load More -->
        <div class="text-center py-8 bg-amber-900 dark:bg-red-900 border-4 border-solid border-amber-700 dark:border-amber-600 text-amber-100 dark:text-amber-200 font-bold uppercase tracking-widest text-lg sm:text-xl transform skew-y-1 mt-8">
          <button class="px-6 py-3 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-base sm:text-lg transform -skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200">
            Load More Alerts
          </button>
        </div>
      </div>
    </div>

    <!-- Bottom brutalist border/bar -->
    <div class="absolute bottom-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-t-4 border-solid border-amber-900 dark:border-amber-700 transform skew-y-2"></div>
    <div class="absolute top-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-b-4 border-solid border-amber-900 dark:border-amber-700 transform -skew-y-2"></div>

  </div>
</div>

<style>
  /* Custom shadow for brutalism effect */
  .shadow-brutal {
    box-shadow: 12px 12px 0px rgba(120, 53, 15, 0.8);
  }
  .dark\:shadow-brutal-dark {
    box-shadow: 12px 12px 0px rgba(69, 21, 21, 0.8);
  }
  .shadow-brutal-inner {
    box-shadow: inset 5px 5px 0px rgba(120, 53, 15, 0.6);
  }
  .dark\:shadow-brutal-inner-dark {
    box-shadow: inset 5px 5px 0px rgba(69, 21, 21, 0.6);
  }

  /* Text shadow for brutalism */
  .text-shadow-brutal {
    text-shadow: 4px 4px 0px rgba(120, 53, 15, 0.6);
  }
  .dark\:text-shadow-brutal-darker {
    text-shadow: 4px 4px 0px rgba(69, 21, 21, 0.6);
  }
</style>

Notifications Component - Industrial Music/Audio

A responsive notifications component with an industrial, raw aesthetic, high contrast colors, and dark mode support, suitable for music and audio platforms. Features unread/read states and interactive elements.

Open Preview

                <div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 shadow-xl dark:shadow-2xl rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700">
    <div class="flex justify-between items-center p-4 sm:p-6 border-b border-stone-200 dark:border-stone-700 bg-stone-100 dark:bg-stone-800">
      <h2 class="text-2xl sm:text-3xl font-bold text-red-700 dark:text-red-500 tracking-wide uppercase">Notifications</h2>
      <button aria-label="Mark all as read" class="text-sm text-stone-600 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 font-medium px-3 py-1 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        Mark all as read
      </button>
    </div>

    <ul class="divide-y divide-stone-200 dark:divide-stone-700">
      <!-- Unread Notification 1: New Release -->
      <li class="p-4 sm:p-6 bg-red-50 dark:bg-red-950/20 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 relative group">
        <span class="absolute top-3 right-3 sm:top-5 sm:right-5 h-3 w-3 sm:h-4 sm:w-4 bg-red-600 rounded-full animate-pulse"></span>
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-md object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/1040/90/90" alt="Album Cover">
          <div class="flex-grow">
            <p class="text-sm text-red-700 dark:text-red-400 font-semibold mb-1">NEW RELEASE</p>
            <p class="font-bold text-lg leading-tight mb-1">'Neon City Beats' by <span class="text-red-700 dark:text-red-500">Synthwave Savant</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Their latest album just dropped! Dive into a symphony of retro-futuristic sounds. Available now.</p>
            <div class="flex space-x-3 text-sm">
              <button aria-label="Listen Now" class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
                Listen Now
              </button>
              <button aria-label="Dismiss" class="px-3 py-1 border border-stone-400 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
                Dismiss
              </button>
            </div>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">5 minutes ago</p>
      </li>

      <!-- Read Notification 1: Artist Followed -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-full object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar">
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">ARTIST UPDATE</p>
            <p class="font-semibold text-lg leading-tight mb-1"><span class="text-red-700 dark:text-red-500">Echoes of Tomorrow</span> just uploaded 3 new tracks!</p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Check out their latest experimental soundscapes: 'Quantum Leap,' 'Urban Decay,' and 'Spectral Bloom.'</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">View Artist Profile</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">1 hour ago</p>
      </li>

      <!-- Unread Notification 2: Playlist Recommendation -->
      <li class="p-4 sm:p-6 bg-red-50 dark:bg-red-950/20 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 relative group">
        <span class="absolute top-3 right-3 sm:top-5 sm:right-5 h-3 w-3 sm:h-4 sm:w-4 bg-red-600 rounded-full animate-pulse"></span>
        <div class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 sm:h-14 sm:w-14 text-red-600 flex-shrink-0 mr-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4zm3-5H9v2h4v-2z"/>
          </svg>
          <div class="flex-grow">
            <p class="text-sm text-red-700 dark:text-red-400 font-semibold mb-1">RECOMMENDED FOR YOU</p>
            <p class="font-bold text-lg leading-tight mb-1">Fresh Playlist: <span class="text-red-700 dark:text-red-500">'Industrial Echoes'</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Based on your recent listening, we've curated a new playlist featuring raw, gritty electronic sounds.</p>
            <div class="flex space-x-3 text-sm">
              <button aria-label="Explore Playlist" class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
                Explore Playlist
              </button>
              <button aria-label="Not Interested" class="px-3 py-1 border border-stone-400 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
                Not Interested
              </button>
            </div>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">3 hours ago</p>
      </li>

      <!-- Read Notification 2: System Update -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 sm:h-14 sm:w-14 text-stone-600 dark:text-stone-400 flex-shrink-0 mr-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99H9S8.5 12 8 12.5s-1 1-1 1.5.5 1 .5 1.5 1 1 1.5 1 1.5.5 1.5 1 0 .5-1 .5H9c-1.1 0-2 .9-2 2s.9 2 2 2h6c1.1 0 2.2-.95 2-2 0 0 .04-.32 0-.5C16.89 16.53 16.5 16 16 16s-1-.5-1-1c0-.5-.5-1-1-1h-1v-2c0-.5-.5-1-1-1H12v-1.01z"/>
          </svg>
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">SYSTEM ANNOUNCEMENT</p>
            <p class="font-semibold text-lg leading-tight mb-1">Platform Update: <span class="text-red-700 dark:text-red-500">Enhanced Audio Playback</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">We've rolled out improvements to audio streaming quality and stability across all devices.</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Read More</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">1 day ago</p>
      </li>

      <!-- Read Notification 3: Community Event -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-full object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/400/90/90" alt="Event Banner">
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">COMMUNITY NEWS</p>
            <p class="font-semibold text-lg leading-tight mb-1">Join our <span class="text-red-700 dark:text-red-500">Live DJ Set</span> this Friday!</p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Prepare for an electrifying industrial techno set from DJ 'Circuit Breaker'. Don't miss it!</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Set Reminder</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">3 days ago</p>
      </li>
    </ul>

    <div class="p-4 sm:p-6 border-t border-stone-200 dark:border-stone-700 bg-stone-100 dark:bg-stone-800 text-center">
      <button aria-label="Load more notifications" class="text-red-600 dark:text-red-500 hover:text-red-700 dark:hover:text-red-400 text-base font-semibold focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        Load More
      </button>
    </div>
  </div>
</div>

Memphis_Gaming_Notification_Simple_Forest_Green

A simple, responsive gaming notification component with a Memphis design influence using a forest green color palette, including dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md bg-gradient-to-br from-emerald-100 to-green-200 dark:from-emerald-900 dark:to-green-950 p-6 rounded-2xl shadow-xl overflow-hidden border-4 border-green-700 dark:border-emerald-600">

    <!-- Decorative Memphis Shapes -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-green-500 dark:bg-emerald-700 transform rotate-45 rounded-lg opacity-70"></div>
    <div class="absolute -bottom-10 -right-10 w-28 h-28 bg-emerald-500 dark:bg-green-700 rounded-full opacity-60"></div>
    <div class="absolute top-1/4 -right-6 w-16 h-4 bg-green-600 dark:bg-emerald-600 transform -rotate-12"></div>
    <div class="absolute bottom-1/3 -left-4 w-12 h-12 bg-emerald-600 dark:bg-green-600 rounded-lg transform rotate-25 opacity-80"></div>

    <div class="relative z-10">
      <div class="flex items-center mb-4">
        <div class="flex-shrink-0 relative">
          <img class="h-12 w-12 rounded-full ring-4 ring-green-600 dark:ring-emerald-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
          <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-red-500 ring-2 ring-emerald-100 dark:ring-emerald-900"></span>
        </div>
        <div class="ml-4">
          <p class="text-lg font-bold text-green-900 dark:text-emerald-100">New Activity!</p>
          <p class="text-sm text-green-700 dark:text-emerald-200">Yesterday at 5:30 PM</p>
        </div>
      </div>

      <p class="text-green-800 dark:text-emerald-200 text-base mb-6 leading-relaxed">
        <span class="font-semibold text-green-900 dark:text-emerald-50">PlayerOne</span> just achieved "Dragon Slayer" achievement! 🎉
      </p>

      <div class="flex justify-end">
        <button class="px-5 py-2 bg-green-700 hover:bg-green-800 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold rounded-xl shadow-lg transform transition-transform duration-200 ease-in-out active:scale-95 border-2 border-green-800 dark:border-emerald-900">
          View Details
        </button>
      </div>
    </div>
  </div>
</div>

Memphis_Notifications_Component

A simple, responsive notifications component with a Memphis design influence using warm neutrals, suitable for non-profit/charity websites. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-beige-50 dark:bg-gray-800 font-sans min-h-screen">
  <div class="max-w-md mx-auto relative rounded-lg overflow-hidden border-2 border-gray-300 dark:border-gray-700 shadow-lg">

    <!-- Memphis Design Elements (BG) -->
    <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20">
      <div class="absolute top-4 left-4 w-12 h-12 bg-cream-500 rounded-full"></div>
      <div class="absolute bottom-20 -right-6 w-24 h-16 bg-warm-gray-300 transform -rotate-12"></div>
      <div class="absolute top-1/3 -left-8 w-20 h-10 bg-beige-700 transform rotate-45"></div>
      <div class="absolute bottom-4 right-4 w-8 h-8 bg-cream-700 rounded-lg"></div>
      <div class="absolute top-1/2 left-1/4 w-16 h-16 rounded-full border-4 border-warm-gray-400"></div>
    </div>

    <div class="relative z-10 bg-white dark:bg-gray-900 rounded-lg p-6 sm:p-8 flex flex-col space-y-4">
      <h2 class="text-2xl sm:text-3xl font-bold text-beige-800 dark:text-cream-300 mb-4 text-center">
        Your Updates
      </h2>

      <!-- Notification Item 1 -->
      <div class="flex items-start bg-beige-100 dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-beige-200 dark:border-gray-700 animate-fade-in">
        <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-beige-300 dark:border-gray-600">
        <div class="flex-1">
          <p class="text-beige-700 dark:text-cream-400 font-semibold">Sarah J. just <span class="text-beige-900 dark:text-cream-200">donated $50</span> to your 'Clean Water Initiative'.</p>
          <p class="text-sm text-warm-gray-500 dark:text-gray-500 mt-1">2 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="flex items-start bg-beige-100 dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-beige-200 dark:border-gray-700 animate-fade-in animate-delay-100">
        <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-beige-300 dark:border-gray-600">
        <div class="flex-1">
          <p class="text-beige-700 dark:text-cream-400 font-semibold">New message from <span class="text-beige-900 dark:text-cream-200">Volunteer Coordinator</span>.</p>
          <p class="text-sm text-warm-gray-500 dark:text-gray-500 mt-1">Yesterday at 10:30 AM</p>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="flex items-start bg-beige-100 dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-beige-200 dark:border-gray-700 animate-fade-in animate-delay-200">
        <img src="https://picsum.photos/id/1005/50/50" alt="Campaign icon" class="w-10 h-10 rounded-full mr-4 border-2 border-beige-300 dark:border-gray-600 object-cover">
        <div class="flex-1">
          <p class="text-beige-700 dark:text-cream-400 font-semibold">'Education for All' campaign reached <span class="text-beige-900 dark:text-cream-200">75% of its goal</span>!</p>
          <p class="text-sm text-warm-gray-500 dark:text-gray-500 mt-1">3 days ago</p>
        </div>
      </div>

      <div class="text-center mt-6">
        <a href="#" class="inline-block px-6 py-3 rounded-full bg-beige-900 text-white dark:bg-cream-600 dark:text-beige-900 font-bold text-lg hover:bg-beige-700 dark:hover:bg-cream-700 transition-colors duration-300 transform hover:scale-105 shadow-md">
          View All
        </a>
      </div>
    </div>
  </div>

  <!-- Custom Tailwind Colors (for demonstration, normally in tailwind.config.js) -->
  <style>
    .bg-beige-50 { background-color: #fcfbf8; }
    .bg-beige-100 { background-color: #f7f5f0; }
    .border-beige-200 { border-color: #edebe4; }
    .border-beige-300 { border-color: #e2e0dc; }
    .text-beige-700 { color: #8e8a7d; }
    .text-beige-800 { color: #6d6a61; }
    .text-beige-900 { color: #4b4840; }
    
    .bg-cream-500 { background-color: #e6b26d; } /* Primary Accent */
    .bg-cream-600 { background-color: #d19f5a; }
    .bg-cream-700 { background-color: #b28549; }
    .dark\:text-cream-200 { color: #fdf2e1; }
    .dark\:text-cream-300 { color: #fbebd0; }
    .dark\:text-cream-400 { color: #f5dfba; }
    
    .bg-warm-gray-300 { background-color: #d3d0c9; }
    .border-warm-gray-400 { border-color: #b6b3ac; }

    /* Simple fade-in animation example */
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
      animation: fade-in 0.5s ease-out forwards;
      opacity: 0;
    }
    .animate-delay-100 { animation-delay: 0.1s; }
    .animate-delay-200 { animation-delay: 0.2s; }
  </style>
</div>

LuxuryNotificationsComponent

A simple, elegant notifications component for social media applications, featuring a luxury/premium design style with muted colors and full responsiveness, including dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 flex justify-center items-start min-h-screen">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Notifications</h2>
    </div>
    <div class="divide-y divide-gray-200 dark:divide-gray-700">

      <!-- Notification Item 1 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">Sophie Dubois</span> liked your post.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">2 hours ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <img class="h-10 w-10 object-cover rounded-md" src="https://picsum.photos/id/1015/80/80" alt="Post thumbnail">
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">David Chen</span> started following you.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">5 hours ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <button class="px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
            Follow Back
          </button>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">Emily White</span> commented on your photo.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">1 day ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <img class="h-10 w-10 object-cover rounded-md" src="https://picsum.photos/id/1084/80/80" alt="Post thumbnail">
        </div>
      </div>

      <!-- Notification Item 4 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">Mark Johnson</span> mentioned you in a post.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">3 days ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <img class="h-10 w-10 object-cover rounded-md" src="https://picsum.photos/id/1040/80/80" alt="Post thumbnail">
        </div>
      </div>

    </div>
    <div class="p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 text-center">
      <a href="#" class="text-lg text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium transition-colors duration-200">
        View All Notifications
      </a>
    </div>
  </div>
</div>

Notifications Component

A complex, responsive notifications component styled with Bauhaus-inspired elements using warm neutrals, suitable for documentation or wiki sites, with dark mode support.

Open Preview

                <div class="font-sans text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12 min-h-screen">
  <div class="mx-auto max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">

    <!-- Header -->
    <div class="relative p-4 md:p-6 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex justify-between items-center">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Notifications</h2>
      <button aria-label="Mark all as read" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        Mark all as read
      </button>
      <div class="absolute top-0 left-0 w-full h-1 bg-yellow-500 dark:bg-yellow-400"></div>
    </div>

    <!-- Navigation / Filters -->
    <div class="flex border-b border-gray-200 dark:border-gray-600">
      <button class="flex-1 py-3 px-4 text-sm font-medium text-center text-gray-700 dark:text-gray-300 border-b-2 border-yellow-500 dark:border-yellow-400 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        All (4)
      </button>
      <button class="flex-1 py-3 px-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        Unread (2)
      </button>
      <button class="flex-1 py-3 px-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        Archived (0)
      </button>
    </div>

    <!-- Notification List -->
    <div class="divide-y divide-gray-200 dark:divide-gray-700">

      <!-- Notification Item 1 (Unread, Alert) -->
      <div class="relative p-4 md:p-6 bg-yellow-50 dark:bg-gray-700 hover:bg-yellow-100 dark:hover:bg-gray-600 transition-colors duration-200">
        <div class="flex items-start">
          <span class="flex-shrink-0 mr-4 text-yellow-600 dark:text-yellow-400">
            <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>
          </span>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">System Maintenance Alert</h3>
              <time datetime="2023-10-27T10:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">5 min ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Scheduled maintenance for our knowledge base will occur on Nov 1st. Expect brief downtime.</p>
            <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Read more details</a>
          </div>
        </div>
        <div class="absolute top-2 right-2">
          <span aria-label="Unread indicator" class="block w-3 h-3 bg-blue-500 dark:bg-blue-400 rounded-full"></span>
        </div>
      </div>

      <!-- Notification Item 2 (Unread, New Feature) -->
      <div class="relative p-4 md:p-6 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex items-start">
          <span class="flex-shrink-0 mr-4 text-green-600 dark:text-green-400">
            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
            </svg>
          </span>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">New Feature: Advanced Search Filters</h3>
              <time datetime="2023-10-26T15:30:00Z" class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">We've rolled out new filters to help you find documentation faster. Try them out!</p>
            <div class="relative w-full h-32 mb-2 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden">
                 <img src="https://picsum.photos/400/200?random=1" alt="New feature screenshot" class="absolute inset-0 w-full h-full object-cover" />
            </div>
            <div class="flex space-x-2">
              <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">View demo</a>
              <a href="#" class="inline-block text-sm text-gray-600 dark:text-gray-400 hover:underline hover:text-gray-800 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Give feedback</a>
            </div>
          </div>
        </div>
        <div class="absolute top-2 right-2">
          <span aria-label="Unread indicator" class="block w-3 h-3 bg-blue-500 dark:bg-blue-400 rounded-full"></span>
        </div>
      </div>

      <!-- Notification Item 3 (Read, User Activity) -->
      <div class="p-4 md:p-6 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex items-start">
          <div class="flex-shrink-0 mr-4 rounded-full overflow-hidden w-9 h-9">
              <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User avatar" class="w-full h-full object-cover" />
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe commented on 'Getting Started'</h3>
              <time datetime="2023-10-25T09:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">2 days ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300">"Great article! I found the section on initial setup particularly helpful."</p>
            <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Reply to comment</a>
          </div>
        </div>
      </div>

      <!-- Notification Item 4 (Read, Article Update) -->
      <div class="p-4 md:p-6 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex items-start">
          <span class="flex-shrink-0 mr-4 text-blue-600 dark:text-blue-400">
            <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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0015.586 6H9m-6 0h.01M6 21v-7a3 3 0 013-3h.482m-.509 5.867 2.1-2.101M16 17a2 2 0 100 4 2 2 0 000-4z"></path>
            </svg>
          </span>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Article Updated: 'Troubleshooting FAQ'</h3>
              <time datetime="2023-10-24T18:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">3 days ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300">The 'Troubleshooting FAQ' article has been updated with new solutions for common issues.</p>
            <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">View updated article</a>
          </div>
        </div>
      </div>

    </div>

    <!-- Footer / CTA -->
    <div class="p-4 md:p-6 bg-gray-100 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 flex justify-center items-center">
      <button aria-label="View all notifications" class="text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        View all notifications
      </button>
      <div class="absolute bottom-0 right-0 w-1 h-32 bg-yellow-500 dark:bg-yellow-400 hidden sm:block"></div>
    </div>

  </div>
</div>

Luxury Notifications Component

A simple, elegant notifications component designed for travel/tourism websites, featuring a luxury/premium style with corporate blue tones and full responsiveness, including dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="px-6 py-5 sm:px-8 sm:py-6 bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-700 dark:to-blue-900 text-white flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Notifications</h2>
      <span class="px-3 py-1 bg-white dark:bg-gray-700 text-blue-800 dark:text-blue-200 rounded-full text-base font-semibold shadow-md">3 New</span>
    </div>

    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Notification Item 1 -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 group hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-300 dark:ring-blue-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-semibold text-blue-700 dark:text-blue-300 truncate">
            Reservation confirmed for Paris!
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Your flight and hotel booking for Paris is confirmed. Have a great trip!
          </p>
          <time datetime="2023-10-27T10:00:00Z" class="text-xs text-gray-500 dark:text-gray-400 mt-2 block">2 hours ago</time>
        </div>
      </li>

      <!-- Notification Item 2 -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 group hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-300 dark:ring-blue-500" src="https://picsum.photos/id/1018/100/100" alt="Offer Icon">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-semibold text-blue-700 dark:text-blue-300 truncate">
            New Exclusive Travel Deals!
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Don't miss out on our limited-time offers to dreamy destinations.
          </p>
          <time datetime="2023-10-27T08:30:00Z" class="text-xs text-gray-500 dark:text-gray-400 mt-2 block">4 hours ago</time>
        </div>
      </li>

      <!-- Notification Item 3 -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 group hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-300 dark:ring-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Support Avatar">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-semibold text-blue-700 dark:text-blue-300 truncate">
            Quick Question About Your Upcoming Trip
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Our support team wants to clarify a detail about your London itinerary.
          </p>
          <time datetime="2023-10-26T16:45:00Z" class="text-xs text-gray-500 dark:text-gray-400 mt-2 block">Yesterday</time>
        </div>
      </li>

      <!-- Notification Item 4 (Old/Read) -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 dark:bg-gray-700/50 opacity-80 group hover:opacity-100 hover:bg-blue-50 dark:hover:bg-gray-700 transition-all duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-200 dark:ring-gray-600" src="https://picsum.photos/id/1084/100/100" alt="Tips Icon">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-medium text-gray-500 dark:text-gray-400 truncate">
             Travel Safety Tips for Rome
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-500 mt-1">
            Important advice to ensure a safe and enjoyable trip to Rome.
          </p>
          <time datetime="2023-10-25T09:00:00Z" class="text-xs text-gray-400 dark:text-gray-500 mt-2 block">2 days ago</time>
        </div>
      </li>

    </ul>

    <div class="p-4 sm:p-6 text-center border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-base font-semibold group">
        View All Notifications
        <svg class="ml-1 h-4 w-4 transform transition-transform duration-200 group-hover:translate-x-1" 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 5l7 7-7 7"></path></svg>
      </a>
    </div>
  </div>
</div>

Notifications Component

Brutalist Notifications Component for Dashboard

Open Preview

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center p-4" dark:bg-gray-900 dark:bg-opacity-80>
  <div class="bg-yellow-400 border-4 border-black p-8 shadow-brutalism w-full max-w-md transform -rotate-3 hover:rotate-0 transition-transform duration-300 dark:bg-purple-700 dark:border-yellow-400">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-3xl font-extrabold text-black uppercase tracking-wider dark:text-yellow-400">Notifications</h2>
      <button class="text-black hover:text-red-700 text-4xl font-bold dark:text-yellow-400 dark:hover:text-red-400">&times;</button>
    </div>
    <div class="space-y-6">
      <div class="bg-blue-500 border-2 border-black p-4 flex items-start space-x-4 transform rotate-1 hover:rotate-0 transition-transform duration-300 dark:bg-teal-500 dark:border-yellow-400">
        <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">New message from <span class="underline">Alex</span></p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">"Hey, are you free for a quick call today?"</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">2 min ago</span>
        </div>
      </div>

      <div class="bg-red-600 border-2 border-black p-4 flex items-start space-x-4 transform -rotate-2 hover:rotate-0 transition-transform duration-300 dark:bg-orange-500 dark:border-yellow-400">
        <img src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">Task <span class="underline">"Prepare Q3 Report"</span> is overdue</p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">Please complete it by end of day.</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">1 hour ago</span>
        </div>
      </div>

      <div class="bg-green-500 border-2 border-black p-4 flex items-start space-x-4 transform rotate-1 hover:rotate-0 transition-transform duration-300 dark:bg-lime-500 dark:border-yellow-400">
        <img src="https://picsum.photos/seed/dashboard/50/50" alt="Dashboard Icon" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400 object-cover">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">System Update Available</p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">New features and bug fixes. Click to learn more.</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">5 hours ago</span>
        </div>
      </div>
    </div>

    <div class="mt-8 text-center">
      <button class="bg-black text-yellow-400 border-2 border-yellow-400 px-6 py-3 font-bold uppercase text-lg tracking-wider hover:bg-yellow-400 hover:text-black transition-colors duration-300 dark:bg-yellow-400 dark:text-black dark:border-purple-700 dark:hover:bg-purple-700 dark:hover:text-yellow-400">
        View All
      </button>
    </div>
  </div>
</div>

<style>
  .shadow-brutalism {
    box-shadow: 8px 8px 0px black;
  }

  /* Dark mode styles come from Tailwind dark: prefix */
</style>

Search Components

Categories

Notifications