Search Components

Activity Feed

Stream of user or system activities

Activity Feed Component

A complex, monochromatic dark mode activity feed component for sports/fitness applications, showcasing various user interactions, achievements, and updates responsively.

Open Preview

                <div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-gray-950 dark:text-gray-50 p-4 sm:p-6 lg:p-8 font-sans">
  <div class="max-w-4xl mx-auto bg-gray-900 rounded-lg shadow-xl overflow-hidden dark:bg-gray-900">
    <div class="p-6 border-b border-gray-800 dark:border-gray-800">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-400 mb-2">Activity Feed</h2>
      <p class="text-gray-400 text-sm sm:text-base">Keep up with your team's latest achievements and updates.</p>
    </div>

    <div class="space-y-6 p-6">

      <!-- Activity Item: Workout Completion -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">John Doe</a> <span class="text-gray-400">completed a</span> <span class="text-blue-400 font-medium">HIIT Workout</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Duration: 45 min · Calories Burned: 550 kcal</p>
          <div class="flex flex-wrap gap-2 mb-3">
            <span class="bg-blue-600/20 text-blue-300 text-xs px-2.5 py-1 rounded-full font-medium">#FitnessGoal</span>
            <span class="bg-blue-600/20 text-blue-300 text-xs px-2.5 py-1 rounded-full font-medium">#HIIT</span>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 12 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 5 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">2 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: New Personal Best -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">Jane Smith</a> <span class="text-gray-400">set a new Personal Best in</span> <span class="text-blue-400 font-medium">Cycling (10k sprint)</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Time: 18:30 min · Previous PB: 19:15 min</p>
          <img src="https://picsum.photos/600/300?random=1" alt="Cycling Route" class="rounded-md w-full h-32 object-cover mb-3">
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 28 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 9 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">4 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: Team Challenge Update -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-xl font-bold text-white">⚽</div>
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            The <span class="text-blue-300 hover:text-blue-400">Team Alpha</span> <span class="text-gray-400">advanced to the next round in the</span> <span class="text-blue-400 font-medium">Winter League Cup</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Next Match: Dec 15, 7 PM vs Team Omega</p>
          <div class="flex items-center space-x-2 text-gray-400 text-sm mb-3">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Team Member">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Team Member">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Team Member">
            <span class="text-xs text-gray-500">+5 members involved</span>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 40 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 15 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">8 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: New Achievement Unlocked -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">Mike Ross</a> <span class="text-gray-400">unlocked the achievement:</span> <span class="text-blue-400 font-medium">'Marathon Finisher'</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Congratulations on finishing your first full marathon!</p>
          <div class="relative w-full h-32 rounded-md overflow-hidden mb-3">
            <img src="https://picsum.photos/600/300?random=2" alt="Marathon run" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent flex items-end p-3">
              <span class="text-2xl font-extrabold text-blue-300 drop-shadow-lg">🏅 Achievement Unlocked!</span>
            </div>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 55 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 20 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">1 day ago</span>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 text-center border-t border-gray-800 dark:border-gray-800">
      <button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        Load More Activities
      </button>
    </div>
  </div>
</div>

Activity Feed Component

A complex 3D-inspired activity feed component for real estate platforms, featuring earth tones, responsive design, and dark mode support. Displays various property-related activities.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen font-sans antialiased text-stone-800 dark:text-stone-200">
  <div class="max-w-4xl mx-auto space-y-8">
    <h1 class="text-4xl font-extrabold text-center mb-10 tracking-tight text-wood-900 dark:text-wood-100 drop-shadow-lg leading-tight">
      <span class="block">Property Activity</span> Insights
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Quick Stats Card -->
      <div class="md:col-span-1 bg-gradient-to-br from-stone-50 to-stone-100 dark:from-stone-800 dark:to-stone-900 p-6 rounded-3xl shadow-xl border border-stone-200 dark:border-stone-700 transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
        <div class="relative flex flex-col items-center justify-center h-full">
          <div class="absolute inset-0 bg-gradient-to-br from-stone-200/50 to-stone-200/30 dark:from-stone-700/50 dark:to-stone-700/30 rounded-3xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-10px); filter: blur(5px); opacity: 0.7; "></div>
          <h2 class="text-xl font-bold mb-4 text-wood-700 dark:text-wood-200">Quick Stats</h2>
          <ul class="space-y-3 text-center text-lg">
            <li class="flex items-center justify-center font-semibold text-wood-800 dark:text-wood-100">
              <svg class="w-6 h-6 mr-2 text-green-600 dark:text-green-400" 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 12l3 3 7-7m-8 6a4 4 0 11-8 0 4 4 0 018 0zm6 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
              New Listings: <span class="ml-2 text-2xl font-extrabold text-green-700 dark:text-green-300">23</span>
            </li>
            <li class="flex items-center justify-center font-semibold text-wood-800 dark:text-wood-100">
              <svg class="w-6 h-6 mr-2 text-blue-600 dark:text-blue-400" 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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0-8H9m3 0h3m-3 6a9 9 0 100-18 9 9 0 000 18z"></path></svg>
              Interests: <span class="ml-2 text-2xl font-extrabold text-blue-700 dark:text-blue-300">189</span>
            </li>
            <li class="flex items-center justify-center font-semibold text-wood-800 dark:text-wood-100">
              <svg class="w-6 h-6 mr-2 text-yellow-600 dark:text-yellow-400" 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
              Sold: <span class="ml-2 text-2xl font-extrabold text-yellow-700 dark:text-yellow-300">5</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- Recent Activity Feed -->
      <div class="md:col-span-2 bg-gradient-to-br from-stone-50 to-stone-100 dark:from-stone-800 dark:to-stone-900 p-6 rounded-3xl shadow-xl border border-stone-200 dark:border-stone-700 transition-all duration-300 ease-in-out">
        <h2 class="text-2xl font-bold mb-6 text-wood-700 dark:text-wood-200 text-center">Recent Activity</h2>
        <div class="space-y-6 relative ml-4 sm:ml-6 md:ml-12 border-l-4 border-wood-400 dark:border-wood-600">

          <!-- Activity Item 1 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" 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="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">2 hours ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">John Doe</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Added a new listing:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Luxurious Riverside Villa</a> and detailed its amenities.
              </p>
              <img src="https://picsum.photos/400/250?random=1" alt="Property Image" class="mt-4 rounded-xl shadow-lg w-full max-h-48 object-cover object-center border border-stone-200 dark:border-stone-700">
            </div>
          </div>

          <!-- Activity Item 2 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" 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="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13h5m-5 3h5m-5 3h5"></path></svg>
            </div>
            <div class="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">4 hours ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">Jane Smith</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Updated property status:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Cozy Downtown Apartment</a> is now 'Under Offer'.
              </p>
            </div>
          </div>

          <!-- Activity Item 3 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            </div>
            <div class="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">1 day ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">Emily White</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Left a new review for:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Spacious Family Home</a>.
                "The agent was very helpful and knowledgeable!"
              </p>
            </div>
          </div>

          <!-- Activity Item 4 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <div class="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">2 days ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">Michael Brown</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Scheduled a viewing for:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Modern City Loft</a> on October 26th.
              </p>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom styles for Earth Tones with 'wood' and 'brown' shades */
  .text-wood-900 { color: #3E2723; }
  .dark\:text-wood-100 { color: #D7CCC8; }
  .text-wood-700 { color: #5D4037; }
  .dark\:text-wood-200 { color: #BCAAA4; }
  .text-wood-800 { color: #4E342E; }
  .dark\:text-wood-100 { color: #D7CCC8; }
  .bg-wood-500 { background-color: #795548; }
  .border-wood-400 { border-color: #8D6E63; }
  .dark\:border-wood-600 { border-color: #6D4C41; }
  .dark\:border-wood-800 { border-color: #4E342E; }
  .border-wood-400 { border-color: #8D6E63; }
  .dark\:border-wood-600 { border-color: #6D4C41; }
  .border-l-4 { border-left-color: #8D6E63; }
  .dark\:border-wood-600 { border-left-color: #6D4C41; }
  .text-wood-600 { color: #6D4C41; }
  .dark\:text-wood-300 { color: #A1887F; }
  .text-brown-700 { color: #7B3F00; /* Darker brown for emphasis */ }
  .dark\:text-brown-300 { color: #CDA27C; /* Lighter brown for dark mode emphasis */ }

  /* 3D Transform and Shadow Adjustments (Perspective required on parent for actual 3D effect) */
  /* Add a perspective to a parent element if you want true 3D transforms */
  /* For this component, we'll apply it to a container, or assume body has it for general use */
  body {
    perspective: 1000px;
  }
</style>

Retro_Healthcare_Activity_Feed

A retro/vintage vibrant activity feed component for healthcare applications, designed with an 80s/90s aesthetic, featuring notifications and updates with responsive and dark mode support.

Open Preview

                <div class="font-mono p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-gray-900 dark:to-gray-800 min-h-screen text-gray-800 dark:text-gray-200">

  <!-- Header with Retro Vibe -->
  <div class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white dark:text-pink-400 drop-shadow-lg leading-tight">
      <span class="bg-gradient-to-r from-red-500 to-yellow-400 px-3 py-1 rounded-lg shadow-lg inline-block transform -rotate-2 animate-pulse-slow">RETRO</span> HEALTH ACTIVITY
    </h1>
    <p class="mt-2 text-xl sm:text-2xl font-semibold text-purple-700 dark:text-purple-300 antialiased">Your Healthcare Pulse</p>
  </div>

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 sm:p-8 border-4 border-yellow-400 dark:border-pink-500 transform skew-y-1 rotate-1 scale-95 transition-all duration-300 hover:skew-y-0 hover:rotate-0 hover:scale-100 ease-in-out">
    <div class="flex items-center justify-between mb-6 border-b-2 border-dashed border-purple-400 dark:border-pink-600 pb-4">
      <h2 class="text-3xl font-bold uppercase text-blue-600 dark:text-blue-400 tracking-wide">
        Activity Log <span class="text-yellow-500 dark:text-yellow-300 animate-bounce ml-2 text-4xl">★</span>
      </h2>
      <button class="bg-yellow-500 hover:bg-yellow-600 dark:bg-pink-600 dark:hover:bg-pink-700 text-white dark:text-gray-100 font-bold py-2 px-4 rounded-full shadow-lg transform -skew-x-6 hover:skew-x-0 transition-transform duration-200">
        View All
      </button>
    </div>

    <ul class="space-y-6">

      <!-- Activity Item 1 -->
      <li class="flex items-start bg-blue-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-blue-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-yellow-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-blue-400 dark:border-cyan-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-26T14:30">Oct 26, 2023, 2:30 PM</time></p>
          <p class="text-lg font-bold text-blue-700 dark:text-blue-300 mb-1">Dr. Anya Sharma</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">New Prescription Added:</span> <span class="font-mono bg-blue-200 dark:bg-gray-600 text-blue-800 dark:text-white px-2 py-1 rounded-md text-sm">Insulin - 10 units daily</span> for diabetes management.</p>
        </div>
        <div class="flex-none text-2xl text-yellow-600 dark:text-yellow-400 ml-4 hidden sm:block">💊</div>
      </li>

      <!-- Activity Item 2 -->
      <li class="flex items-start bg-green-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-green-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-yellow-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-green-400 dark:border-emerald-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-26T10:15">Oct 26, 2023, 10:15 AM</time></p>
          <p class="text-lg font-bold text-green-700 dark:text-green-300 mb-1">System Update</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">New Feature:</span> Your latest blood pressure readings have been successfully synchronized from your smart device. <span class="text-green-600 dark:text-green-400 blinking-text">LIVE!</span></p>
        </div>
        <div class="flex-none text-2xl text-lime-600 dark:text-lime-400 ml-4 hidden sm:block">📈</div>
      </li>

      <!-- Activity Item 3 -->
      <li class="flex items-start bg-yellow-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-yellow-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-purple-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-yellow-400 dark:border-amber-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-25T16:00">Oct 25, 2023, 4:00 PM</time></p>
          <p class="text-lg font-bold text-yellow-700 dark:text-yellow-300 mb-1">Clinic Notification</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">Appointment Reminder:</span> Your upcoming physiotherapy session is scheduled for <span class="font-mono bg-yellow-200 dark:bg-gray-600 text-yellow-800 dark:text-white px-2 py-1 rounded-md text-sm">tomorrow, Oct 27, 9:00 AM</span>.</p>
        </div>
        <div class="flex-none text-2xl text-orange-600 dark:text-orange-400 ml-4 hidden sm:block">📅</div>
      </li>

      <!-- Activity Item 4 -->
      <li class="flex items-start bg-red-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-red-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-purple-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="System Bot" class="w-12 h-12 rounded-full mr-4 border-4 border-red-400 dark:border-rose-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-25T09:00">Oct 25, 2023, 9:00 AM</time></p>
          <p class="text-lg font-bold text-red-700 dark:text-red-300 mb-1">Emergency Contact Alert</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">Emergency Alert Test:</span> Your emergency contacts have been notified of a system test. No action required. <span class="text-red-600 dark:text-red-400 flashing-text">TEST!</span></p>
        </div>
        <div class="flex-none text-2xl text-red-600 dark:text-red-400 ml-4 hidden sm:block">🚨</div>
      </li>

    </ul>

    <div class="mt-8 text-center">
      <button class="bg-purple-600 hover:bg-purple-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white dark:text-gray-100 font-extrabold py-3 px-8 rounded-lg shadow-lg text-lg transform hover:scale-105 transition-transform duration-200 border-4 border-pink-400 dark:border-yellow-400 animate-pulse">
        LOAD MORE DATA
      </button>
    </div>
  </div>

  <!-- Tailwind JIT custom animations (typically in tailwind.config.js - but included here for single file component) -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { opacity: 1; transform: scale(1) rotate(-2deg); }
      50% { opacity: 0.8; transform: scale(1.02) rotate(-2deg); }
    }
    .animate-pulse-slow {
      animation: pulse-slow 4s infinite ease-in-out;
    }

    @keyframes blinking-text {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .blinking-text {
      animation: blinking-text 1.5s infinite step-end;
    }

    @keyframes flashing-text {
      0%, 100% { color: #dc2626; /* red-600 */ }
      50% { color: #facc15; /* yellow-400 */ }
    }
    .flashing-text {
      animation: flashing-text 0.8s infinite step-end;
    }

    @keyframes ping-slow {
      0% { transform: scale(0.8); opacity: 0.5; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    .animate-ping-slow {
      animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    /* Basic dark mode toggle for demonstration, not part of the component itself but useful for testing */
    .dark-mode-toggle {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        background-color: #6d28d9; /* Deep Purple */
        color: white;
        padding: 0.75rem 1.25rem;
        border-radius: 9999px;
        cursor: pointer;
        font-family: sans-serif;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        z-index: 1000;
    }
    .dark .dark-mode-toggle {
        background-color: #db2777; /* Deep Pink */
    }
  </style>

  <!-- Simple Dark Mode Toggle (for demonstration) -->
  <button class="dark-mode-toggle" onclick="document.documentElement.classList.toggle('dark')">
    Toggle Dark Mode
  </button>

</div>

Activity Feed Component

An organic/nature-inspired activity feed component for event and conference websites, featuring flowing lines, earth tones, and rich interactive elements. Fully responsive with dark mode support.

Open Preview

                <div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-850 shadow-xl rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700">
    <div class="p-6 sm:p-8 relative overflow-hidden">
      <!-- Organic top border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-green-700 via-amber-700 to-green-700 origin-bottom scale-y-75 rounded-t-lg -skew-x-12 opacity-75 dark:opacity-50 blur-sm"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-100 mb-2 sm:mb-4 relative z-10">Event Activity Feed</h2>
      <p class="text-lg text-stone-600 dark:text-stone-300 mb-6 sm:mb-8 border-b border-stone-300 dark:border-stone-700 pb-4">Stay up-to-date with the latest happenings at Nature's Summit 2024.</p>

      <div class="space-y-8">

        <!-- Activity Item 1 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-green-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">Dr. Elara Vance <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@elaravance</span></p>
            <p class="text-stone-700 dark:text-stone-300 leading-relaxed">Just concluded a thrilling discussion on 'Sustainable Ecosystems'! The insights from the audience were truly inspiring. #NaturesSummit2024 #Sustainability</p>
            <div class="mt-3 flex flex-wrap gap-2">
              <a href="#" class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-green-100 dark:bg-green-700 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-600 transition-colors"><svg class="w-4 h-4 mr-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.916 9.916 0 01-2.903-.555L5 21l1.618-3.109A9.956 9.956 0 0112 12c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8a9.956 9.956 0 011.618 3.109L3 21l3.109-1.618A9.956 9.956 0 0112 12z"></path></svg> 12 Comments</a>
              <a href="#" class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-amber-100 dark:bg-amber-700 text-amber-800 dark:text-amber-200 hover:bg-amber-200 dark:hover:bg-amber-600 transition-colors"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 24 Likes</a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">2 hours ago</p>
          </div>
        </div>

        <!-- Activity Item 2 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-blue-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">Botanist Ben <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@plantwhisperer</span></p>
            <p class="text-stone-700 dark:text-stone-300 leading-relaxed">New photo added! Exploring the local flora on the 'Forest Secrets' nature walk. So much beauty in every corner! 🌲🌿</p>
            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
              <a href="#" class="block aspect-video rounded-lg overflow-hidden group">
                <img class="object-cover w-full h-full transform transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/250?random=1" alt="Nature Photo">
              </a>
              <a href="#" class="block aspect-video rounded-lg overflow-hidden group sm:block hidden">
                <img class="object-cover w-full h-full transform transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/250?random=2" alt="Nature Photo">
              </a>
              <a href="#" class="block aspect-video rounded-lg overflow-hidden group lg:block hidden">
                <img class="object-cover w-full h-full transform transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/250?random=3" alt="Nature Photo">
              </a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">4 hours ago</p>
          </div>
        </div>

        <!-- Activity Item 3 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-yellow-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">Conference Schedule Update <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@summitadmin</span></p>
            <div class="p-4 rounded-lg bg-emerald-100 dark:bg-emerald-800 border border-emerald-200 dark:border-emerald-700 flex items-center justify-between flex-wrap gap-3">
              <div>
                <p class="font-bold text-emerald-800 dark:text-emerald-100">Room Change for 'Future of Forests' Session!</p>
                <p class="text-sm text-emerald-700 dark:text-emerald-200">The session 'The Future of Forests' with Dr. Anya Sharma has been moved to <span class="font-semibold">Oak Hall (Room 305)</span> at 14:00.</p>
              </div>
              <a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-full bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white transition-colors">
                View Updated Schedule
                <svg class="w-4 h-4 ml-2" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
              </a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">6 hours ago</p>
          </div>
        </div>

        <!-- Activity Item 4 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-purple-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">EcoWarrior Lily <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@lily_eco_quest</span></p>
            <p class="text-stone-700 dark:text-stone-300 leading-relaxed">Engaging panel on 'Climate Action for All'! Feeling so motivated to make a difference. Let's work together for a greener future! 🌍</p>
            <div class="mt-3">
              <video controls class="w-full h-auto rounded-lg shadow-md border border-stone-300 dark:border-stone-700" poster="https://picsum.photos/400/250?random=4">
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                Your browser does not support the video tag.
              </video>
            </div>
            <div class="mt-3 flex flex-wrap gap-2">
              <a href="#" class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-violet-100 dark:bg-violet-700 text-violet-800 dark:text-violet-200 hover:bg-violet-200 dark:hover:bg-violet-600 transition-colors"><svg class="w-4 h-4 mr-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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M18.364 18.364l-.707-.707M12 21v-1m-6.364-1.636l.707-.707M3 12H4m1.636-6.364l.707-.707M6 10v4a2 2 0 002 2h3.586a1 1 0 00.707-.293l2.414-2.414a1 1 0 00-.707-1.707L12 9l-.586-.586A2 2 0 009 8h-3a2 2 0 00-2 2z"></path></svg> Share Event</a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">11 hours ago</p>
          </div>
        </div>

      </div>

      <div class="mt-10 text-center">
        <button class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-stone-850 transform transition-transform duration-200 ease-out hover:scale-105 active:scale-95">
          Load More Activities
          <svg class="ml-3 -mr-1 h-5 w-5" 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="M19 9l-7 7-7-7"></path></svg>
        </button>
      </div>

    </div>
  </div>
</div>

Brutalist Activity Feed

A brutalist-inspired activity feed component for SaaS applications, featuring an earth-tone color scheme, high contrast, and a raw design aesthetic. Responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen font-mono text-stone-800 dark:text-stone-200">
  <div class="max-w-4xl mx-auto border-4 border-stone-900 dark:border-stone-100 p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 shadow-[8px_8px_0_0_#444] dark:shadow-[8px_8px_0_0_#999]">
    <h2 class="text-3xl sm:text-4xl font-bold mb-6 text-stone-900 dark:text-stone-100 uppercase tracking-widest border-b-4 border-stone-900 dark:border-stone-100 pb-2">
      Activity Log
    </h2>

    <div class="space-y-6">

      <!-- Activity Item 1: New Project -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Alex Johnson</span> created a new project
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Quantum Leap Initiative'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">2 hours ago &bull; Project Management</p>
            <div class="mt-3 p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm italic">
              <p>"We're aiming to revolutionize data processing. This is a big one!"</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 2: Task Update -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Dr. Lena Petrova</span> updated task
              <span class="text-blue-800 dark:text-blue-300 font-extrabold">'Implement Auth Module'</span> in
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Secure Core System'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">5 hours ago &bull; Development</p>
            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
              <div class="p-2 border-2 border-yellow-800 dark:border-yellow-300 bg-yellow-300 dark:bg-yellow-800 text-yellow-900 dark:text-yellow-100 font-bold">
                Status: <span class="underline">In Progress</span>
              </div>
              <div class="p-2 border-2 border-orange-800 dark:border-orange-300 bg-orange-300 dark:bg-orange-800 text-orange-900 dark:text-orange-100 font-bold">
                Progress: <span class="underline">65% Complete</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 3: File Upload -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Carlos Rivera</span> uploaded 3 files to
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Marketing Assets 2023'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">1 day ago &bull; Design</p>
            <div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-2">
              <img src="https://picsum.photos/id/1025/300/200" alt="Uploaded Image 1" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://picsum.photos/id/1004/300/200" alt="Uploaded Image 2" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://picsum.photos/id/1008/300/200" alt="Uploaded Image 3" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 4: Comment -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Sarah Chen</span> commented on task
              <span class="text-blue-800 dark:text-blue-300 font-extrabold">'Data Migration Strategy'</span> in
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Legacy System Upgrade'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">2 days ago &bull; Operations</p>
            <div class="mt-3 p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm italic font-semibold">
              <p>"Have we considered the implications of the new GDPR policies on this migration phase? It's critical."</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 5: User Joined -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">David Kim</span> joined the team
              <span class="text-purple-800 dark:text-purple-300 font-extrabold">'Backend Engineers'</span>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">3 days ago &bull; HR System</p>
            <div class="mt-3 flex items-center justify-between p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm ">
              <span class="text-md font-bold"><span class="text-orange-900 dark:text-orange-100">Welcome, David!</span></span>
              <img src="https://picsum.photos/id/1084/80/80" alt="Abstract Icon" class="w-12 h-12 border-2 border-stone-700 dark:border-stone-300 hidden sm:block">
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Activity Feed Component

A responsive activity feed component designed in a paper/print-inspired style with sepia/brown tones, suitable for forums and community platforms. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 font-sans p-4 sm:p-6 md:p-8 lg:p-10 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-800 shadow-lg rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700 font-serif">
    <!-- Header -->
    <div class="bg-stone-200 dark:bg-stone-700 p-4 border-b border-stone-300 dark:border-stone-600 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200 tracking-wide">Recent Activity</h2>
      <button class="flex items-center text-sm text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
        <svg class="w-4 h-4 mr-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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.333.91 2.222 2.419a1.724 1.724 0 00.045 2.112c1.292 1.41-0.291 3.244-1.921 3.568a1.724 1.724 0 00-1.065 2.572c.945 1.543-.91 3.333-2.419 2.222a1.724 1.724 0 00-2.112.045c-1.41 1.292-3.244-.291-3.568-1.921a1.724 1.724 0 00-2.572-1.065c-1.543.945-3.333-.91-2.222-2.419a1.724 1.724 0 00-.045-2.112c-1.292-1.41 0.291-3.244 1.921-3.568a1.724 1.724 0 001.065-2.572c-.945-1.543.91-3.333 2.419-2.222a1.724 1.724 0 002.112-.045z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span>Filter</span>
      </button>
    </div>

    <!-- Activity List -->
    <div class="divide-y divide-stone-200 dark:divide-stone-700">

      <!-- Activity Item 1: New Thread -->
      <div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-stone-800 dark:text-stone-200 leading-relaxed">
              <a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">John Doe</a> started a new thread:
              <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1">
                'Tips for maintaining a vintage typewriter'
              </a>
            </p>
            <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">2 hours ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'Antiques & Collectibles'</a></p>
            <div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 5</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-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="M7 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 12 comments</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 2: New Post -->
      <div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-stone-800 dark:text-stone-200 leading-relaxed">
              <a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Jane Smith</a> posted a reply in
              <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1">
                'Upcoming Local Book Fair'
              </a>
            </p>
            <blockquote class="border-l-4 border-stone-300 dark:border-stone-600 pl-4 py-2 mt-3 mb-2 italic text-stone-700 dark:text-stone-300 bg-stone-50 dark:bg-stone-700/60 rounded-sm">
              "I'm really excited about the selection this year. Anyone know if there will be any workshops on calligraphy?"
            </blockquote>
            <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">5 hours ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'Local Events'</a></p>
            <div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 8</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-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="M7 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 27 replies</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 3: New File Upload -->
      <div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-stone-800 dark:text-stone-200 leading-relaxed">
              <a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Michael Green</a> uploaded a new file:
              <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1 flex items-center">
                <svg class="w-5 h-5 mr-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 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                'Old Maps Collection.rar'
              </a>
            </p>
            <img class="w-full h-32 sm:h-48 object-cover rounded-md mt-3 mb-2 border border-stone-200 dark:border-stone-600" src="https://picsum.photos/600/300?random=1" alt="Uploaded Image">
            <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">1 day ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'Historical Archives'</a></p>
            <div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 15</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-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="M7 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 9 comments</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 4: Upvote -->
      <div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-stone-800 dark:text-stone-200 leading-relaxed">
              <a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Sarah Lee</a> upvoted a post by 
              <a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Emily White</a> in 
              <a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1">
                'Discussing the merits of paper vs. digital books'
              </a>
            </p>
            <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">2 days ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'General Discussion'</a></p>
            <div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
              <span class="flex items-center text-amber-600 dark:text-amber-400"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-8a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg> Upvoted</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-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="M7 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 45 replies</span>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Footer -->
    <div class="bg-stone-200 dark:bg-stone-700 p-4 border-t border-stone-300 dark:border-stone-600 text-center">
      <button class="px-5 py-2 rounded-full bg-amber-700 text-white dark:bg-amber-600 hover:bg-amber-800 dark:hover:bg-amber-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium tracking-wide">
        Load More Activity
      </button>
    </div>
  </div>
</div>

Activity Feed Component

A complex, responsive activity feed component with neon/glow effects and vibrant colors, suitable for cryptocurrency/blockchain applications, featuring dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-gray-950 dark:text-gray-50 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gradient-to-br from-violet-950 via-gray-900 to-indigo-950 rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10 border border-violet-800 dark:border-indigo-800 relative overflow-hidden">
    
    <!-- Background Glow Elements (decorative) -->
    <div class="absolute -top-16 -left-16 w-64 h-64 bg-violet-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-violet-700"></div>
    <div class="absolute -bottom-16 -right-16 w-64 h-64 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-indigo-700"></div>
    <div class="absolute top-1/4 left-1/4 w-48 h-48 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-purple-600"></div>

    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-violet-400 to-indigo-400 dark:from-violet-300 dark:to-indigo-300 drop-shadow-lg [text-shadow:_0_0_10px_rgb(139_92_246/0.7),_0_0_20px_rgb(129_140_248/0.6)]">
      Activity Feed
    </h2>

    <div class="space-y-6 sm:space-y-8 max-h-[70vh] overflow-y-auto custom-scrollbar">

      <!-- Activity Item 1: Transaction -->
      <div class="flex items-start bg-gray-900/40 border border-violet-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-violet-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-violet-500 to-fuchsia-600 shadow-lg border border-violet-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-violet-300">Transaction Confirmed</p>
          <p class="text-lg sm:text-xl font-bold text-gray-50 mt-1">0.5 <span class="text-green-400">ETH</span> Received</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">From: <span class="font-mono">0xAbc...123f</span></p>
          <p class="text-xs sm:text-sm text-purple-300 mt-2">2 minutes ago</p>
        </div>
      </div>

      <!-- Activity Item 2: NFT Mint -->
      <div class="flex items-start bg-gray-900/40 border border-indigo-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-indigo-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-indigo-500 to-blue-600 shadow-lg border border-indigo-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m1.414 1.414L9 11M3 11v-1a2 2 0 012-2h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 001.414 0l3.414-3.414a1 1 0 01.707-.293H19a2 2 0 012 2v1m-6 0a6 6 1 11-12 0 6 6 0 0112 0z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-indigo-300">New NFT Minted</p>
          <a href="#" class="text-lg sm:text-xl font-bold text-teal-400 hover:text-teal-300 transition-colors duration-200 mt-1 block">"CryptoPunk #7890"</a>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">Owner: <span class="font-mono">0xDef...456e</span></p>
          <img src="https://picsum.photos/id/1018/100/100" alt="NFT Preview" class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md mt-2 border border-gray-600 shadow-md" />
          <p class="text-xs sm:text-sm text-blue-300 mt-2">15 minutes ago</p>
        </div>
      </div>

      <!-- Activity Item 3: DeFi Staking -->
      <div class="flex items-start bg-gray-900/40 border border-purple-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-purple-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-purple-500 to-pink-600 shadow-lg border border-purple-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3 3 3 3-3M3 21h18M7 21v-7a1 1 0 011-1h8a1 1 0 011 1v7M7 21h4a1 1 0 001-1v-1a1 1 0 011-1h2a1 1 0 011 1v1a1 1 0 001 1h4M12 20a1 1 0 001-1h-2a1 1 0 001 1z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-purple-300">DeFi Staking Reward</p>
          <p class="text-lg sm:text-xl font-bold text-yellow-400 mt-1">+0.02 <span class="text-yellow-300">COMP</span> Earned</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">Pool: <span class="font-bold">Compound ETH-USDC</span></p>
          <p class="text-xs sm:text-sm text-pink-300 mt-2">30 minutes ago</p>
        </div>
      </div>

      <!-- Activity Item 4: Governance Vote -->
      <div class="flex items-start bg-gray-900/40 border border-teal-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-teal-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-teal-500 to-cyan-600 shadow-lg border border-teal-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 003 12c0 2.755 4.318 6.994 3.714 6.994s9.994-4.239 9.994-6.994a12.01 12.01 0 00-.382-3.04z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-teal-300">Governance Vote Cast</p>
          <p class="text-lg sm:text-xl font-bold text-gray-50 mt-1">Voted 'Yes' on <span class="text-cyan-400">Proposal #123</span></p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">DAO: <span class="font-bold">Uniswap Governance</span></p>
          <p class="text-xs sm:text-sm text-cyan-300 mt-2">1 hour ago</p>
        </div>
      </div>

      <!-- Activity Item 5: Wallet Connect -->
      <div class="flex items-start bg-gray-900/40 border border-orange-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-orange-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-orange-500 to-red-600 shadow-lg border border-orange-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 11V7a4 4 0 118 0v4m-1.5 5H17a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2h4.5M11 20.5V21a1 1 0 001 1h2a1 1 0 001-1v-.5m-3 0a.5.5 0 011 0V21a.5.5 0 01-1 0v-.5z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-orange-300">Wallet Connected</p>
          <p class="text-lg sm:text-xl font-bold text-gray-50 mt-1">MetaMask DApp Connection</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">User: <span class="font-mono">0x789...abcd</span></p>
          <p class="text-xs sm:text-sm text-red-300 mt-2">2 hours ago</p>
        </div>
      </div>

      <!-- Activity Item 6: Price Alert -->
      <div class="flex items-start bg-gray-900/40 border border-lime-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-lime-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-lime-500 to-green-600 shadow-lg border border-lime-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 7l4-4m0 0l4 4m-4-4v18" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-lime-300">Price Alert Triggered</p>
          <p class="text-lg sm:text-xl font-bold text-green-400 mt-1">BTC climbed past $30,000</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">Current Price: <span class="font-bold">$30,123.45</span></p>
          <p class="text-xs sm:text-sm text-green-300 mt-2">3 hours ago</p>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Custom Scrollbar for Webkit browsers */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #1f013d; /* Dark violet/purple background */
    border-radius: 10px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a78bfa; /* Light violet */
    border-radius: 10px;
    border: 2px solid #5b21b6; /* darker violet border */
    box-shadow: 0 0 8px #a78bfa; /* Glow effect */
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #c4b5fd; /* Lighter violet on hover */
    box-shadow: 0 0 12px #c4b5fd; /* Stronger glow on hover */
  }

  /* Animation for background glow blobs */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
  
  /* Glow effect for activity item borders */
  .glow-border {
    position: relative;
    border: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, rgba(139, 92, 246, 0.5), rgba(129, 140, 248, 0.5)); /* Violet to Indigo */
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2), inset 0 0 5px rgba(139, 92, 246, 0.1);
    transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
    background: linear-gradient(to bottom, rgba(31, 0, 61, 0.5), rgba(0, 0, 0, 0.4));
  }

  .group:hover .glow-border {
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.5), inset 0 0 10px rgba(139, 92, 246, 0.2), 0 0 30px rgba(129, 140, 248, 0.3); 
    transform: translateY(-2px); /* Slight lift on hover */
    border-image-source: linear-gradient(to right, rgba(139, 92, 246, 0.8), rgba(129, 140, 248, 0.8)); /* Stronger border glow */
  }

  /** Dark mode considerations for glow and backgrounds if ever needed to be different, but current design uses same dark gradient for main container */
  .dark .glow-border {
      /* Can be tweaked for a different dark mode glow if desired */
  }

</style>

A simple, responsive activity feed component with a cyberpunk-autumn aesthetic, featuring dark backgrounds, rich oranges, browns, and burgundy tones, suitable for sports/fitness applications. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-[#1a0f0f] dark:bg-[#0a0000] p-4 sm:p-6 md:p-8 font-mono text-[#f8a848] dark:text-[#f8d878]">
  <div class="max-w-xl mx-auto bg-[#2b1a1a] dark:bg-[#1a0a0a] rounded-lg shadow-lg overflow-hidden border border-[#5c3d2e] dark:border-[#3a1d1d]">
    <div class="p-4 sm:p-6 border-b border-[#5c3d2e] dark:border-[#3a1d1d] flex items-center justify-between">
      <h2 class="text-xl sm:text-2xl font-bold uppercase text-[#f8a848] dark:text-[#f8d878]">
        <span class="text-[#ff6f00] dark:text-[#ff9f48]">//</span> ACTIVITY FEED
      </h2>
      <span class="text-sm text-[#8c5339] dark:text-[#b87353]">LIVE <span class="animate-pulse text-[#d62828]">•</span></span>
    </div>

    <div class="divide-y divide-[#3d2929] dark:divide-[#2a1a1a]">

      <!-- Activity Item 1 -->
      <div class="p-4 sm:p-6 flex items-start space-x-4">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm sm:text-base mb-1">
            <strong class="text-[#ff6f00] dark:text-[#ff9f48]">Jake 'The Hammer' Miller</strong> completed <span class="text-[#bf4a24] dark:text-[#e07b39]">5K Run</span>.
          </p>
          <p class="text-xs text-[#8c5339] dark:text-[#b87353]">15 minutes ago</p>
          <div class="mt-2 bg-[#1f1212] dark:bg-[#0f0707] p-3 rounded-md border border-[#3d2929] dark:border-[#2a1a1a] text-sm text-[#f8a848] dark:text-[#f8d878] leading-tight">
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Distance: 5.0 km</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Time: 23:45</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Avg Pace: 4:45/km</p>
          </div>
        </div>
      </div>

      <!-- Activity Item 2 -->
      <div class="p-4 sm:p-6 flex items-start space-x-4">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm sm:text-base mb-1">
            <strong class="text-[#ff6f00] dark:text-[#ff9f48]">Sarah 'Rocket' Lee</strong> joined the <span class="text-[#bf4a24] dark:text-[#e07b39]">'Autumn Marathon Prep' Challenge</span>.
          </p>
          <p class="text-xs text-[#8c5339] dark:text-[#b87353]">1 hour ago</p>
          <div class="mt-2 text-sm text-[#f8a848] dark:text-[#f8d878]">
            <img class="w-full max-h-40 object-cover rounded-md border border-[#3d2929] dark:border-[#2a1a1a] mb-2" src="https://picsum.photos/400/250?random=1" alt="Challenge Image">
            <p class="text-xs text-[#8c5339] dark:text-[#b87353]">Challenge goal: 42.2 km in 4 weeks.</p>
          </div>
        </div>
      </div>

      <!-- Activity Item 3 -->
      <div class="p-4 sm:p-6 flex items-start space-x-4">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm sm:text-base mb-1">
            <strong class="text-[#ff6f00] dark:text-[#ff9f48]">Coach Dave</strong> updated <span class="text-[#bf4a24] dark:text-[#e07b39]">Team Blaze's Next Practice</span>.
          </p>
          <p class="text-xs text-[#8c5339] dark:text-[#b87353]">3 hours ago</p>
          <div class="mt-2 bg-[#1f1212] dark:bg-[#0f0707] p-3 rounded-md border border-[#3d2929] dark:border-[#2a1a1a] text-sm text-[#f8a848] dark:text-[#f8d878] leading-tight">
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Date: 2023-11-10</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Time: 18:00 EST</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Location: City Sports Arena, Court 3</p>
          </div>
        </div>
      </div>

    </div>

    <div class="p-4 sm:p-6 border-t border-[#5c3d2e] dark:border-[#3a1d1d] text-center text-xs text-[#8c5339] dark:text-[#b87353]">
      <p>DATA STREAM // ENCRYPTED & SECURE</p>
    </div>
  </div>
</div>

Activity Feed Component

A responsive activity feed component with a Bauhaus-inspired design, featuring black and white monochome with a primary color accent, suitable for Technology/SaaS applications. Includes dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 min-h-screen">

  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    
    <div class="bg-black dark:bg-gray-950 p-4 sm:p-5 flex items-center justify-between border-b-4 border-red-500">
      <h2 class="text-xl sm:text-2xl font-bold uppercase tracking-wider text-white">Activity Feed</h2>
      <button class="p-2 rounded-full text-white hover:bg-white hover:text-black focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 transition duration-300 ease-in-out">
        <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="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>

    <div class="p-4 sm:p-6 space-y-6 sm:space-y-8">

      <!-- Activity Item 1 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0 animate-pulse">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">John Doe</span> changed the status of <span class="font-medium text-gray-700 dark:text-gray-300">Task #1234</span>
            <time datetime="2023-10-27T14:30:00Z" class="ml-2 text-xs">2 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner text-sm">
            <p class="text-gray-700 dark:text-gray-300 font-bold mb-1">Status Update:</p>
            <p class="text-gray-600 dark:text-gray-400">From <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">In Progress</span> to <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Completed</span></p>
          </div>
        </div>
      </div>
      
      <!-- Activity Item 2 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</span> added 3 new files to <span class="font-medium text-gray-700 dark:text-gray-300">Project Alpha</span>
            <time datetime="2023-10-27T13:00:00Z" class="ml-2 text-xs">3 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner">
            <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" 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-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>design_mockup_v2.png</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" 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-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>requirements.pdf</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" 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-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>project_plan.xlsx</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Activity Item 3 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">Robert Brown</span> commented on <span class="font-medium text-gray-700 dark:text-gray-300">Bug Report #567</span>
            <time datetime="2023-10-27T10:15:00Z" class="ml-2 text-xs">6 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner text-sm">
            <p class="text-gray-700 dark:text-gray-300">"I've replicated the bug on Firefox 118. It seems to be related to the new authentication flow. Investigating a fix now."</p>
          </div>
        </div>
      </div>

      <!-- Activity Item 4 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span> invited <span class="font-medium text-gray-700 dark:text-gray-300">David Green</span> to the team
            <time datetime="2023-10-27T09:00:00Z" class="ml-2 text-xs">8 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner">
            <div class="flex items-center space-x-3">
              <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/70.jpg" alt="Invited User Avatar">
              <div>
                <p class="text-gray-700 dark:text-gray-300 font-medium">David Green</p>
                <p class="text-gray-600 dark:text-gray-400 text-xs">[email protected]</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="bg-gray-50 dark:bg-gray-700 p-4 sm:p-5 border-t border-gray-200 dark:border-gray-600 flex justify-center">
      <button class="px-6 py-2 bg-red-500 text-white font-semibold rounded-md shadow-md hover:bg-black dark:hover:bg-gray-950 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out uppercase tracking-wide text-sm">
        Load More
      </button>
    </div>

  </div>
</div>

Activity Feed Component

An activity feed component designed with a skeuomorphic aesthetic, using a triadic color scheme suitable for business/corporate websites. It is responsive and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
  <!-- Component Container -->
  <div class="max-w-4xl mx-auto bg-gray-50 dark:bg-gray-850 rounded-xl shadow-2xl overflow-hidden
              border border-gray-200 dark:border-gray-700
              transform perspective-1000 rotateX-3 rotateY-2 scale-98
              transition-all duration-300 ease-in-out hover:scale-100 hover:rotateX-0 hover:rotateY-0">

    <!-- Header -->
    <div class="px-6 py-4 bg-gradient-to-br from-blue-600 to-indigo-700 dark:from-blue-800 dark:to-indigo-900 text-white shadow-inner-lg
                border-b border-blue-700 dark:border-blue-900
                relative overflow-hidden z-10">
      <h2 class="text-3xl font-extrabold text-white tracking-tight leading-tight text-shadow-md relative z-20">
        Activity Feed
      </h2>
      <p class="mt-1 text-blue-100 dark:text-blue-200 text-sm italic relative z-20">Recent updates and notifications</p>

      <!-- Skeuomorphic light reflection -->
      <div class="absolute top-0 left-0 w-full h-full opacity-20 light-reflection z-10"></div>
    </div>

    <!-- Activity List -->
    <div class="divide-y divide-gray-200 dark:divide-gray-700 p-4 sm:p-6">

      <!-- Activity Item 1 -->
      <div class="py-4 flex items-start space-x-4 group
                  relative z-10
                  bg-white dark:bg-gray-850 rounded-lg p-3
                  transform transition-all duration-200 ease-in-out
                  active:translate-y-px active:shadow-inner hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-900">
        <div class="flex-shrink-0 relative">
          <img class="h-12 w-12 rounded-full ring-2 ring-emerald-500 dark:ring-emerald-400 object-cover shadow-md user-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-850 bg-emerald-400 animate-pulse" aria-hidden="true"></span>
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-snug">
            <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">John Doe</a> <span class="font-normal text-gray-600 dark:text-gray-400">completed task</span>
            <span class="text-emerald-600 dark:text-emerald-400 font-medium ml-1">"Project Alpha Design"</span>
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <time datetime="2023-10-26T14:30">October 26, 2023 at 2:30 PM</time>
          </p>
          <div class="mt-2 p-2 bg-gray-100 dark:bg-gray-825 rounded-md text-sm text-gray-700 dark:text-gray-300 shadow-inner px-3 py-2 border border-gray-200 dark:border-gray-750 message-bubble">
            <p>Uploaded final mockups and updated progress to 100%.</p>
          </div>
        </div>
      </div>

      <!-- Activity Item 2 -->
      <div class="py-4 flex items-start space-x-4 group
                  relative z-10
                  bg-white dark:bg-gray-850 rounded-lg p-3
                  transform transition-all duration-200 ease-in-out
                  active:translate-y-px active:shadow-inner hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-900">
        <div class="flex-shrink-0 relative">
          <img class="h-12 w-12 rounded-full ring-2 ring-red-500 dark:ring-red-400 object-cover shadow-md user-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-850 bg-red-400" aria-hidden="true"></span>
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-snug">
            <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">Jane Smith</a> <span class="font-normal text-gray-600 dark:text-gray-400">commented on issue</span>
            <span class="text-red-600 dark:text-red-400 font-medium ml-1">#CRIT-451</span>
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <time datetime="2023-10-26T10:15">October 26, 2023 at 10:15 AM</time>
          </p>
          <div class="mt-2 p-2 bg-gray-100 dark:bg-gray-825 rounded-md text-sm text-gray-700 dark:text-gray-300 shadow-inner px-3 py-2 border border-gray-200 dark:border-gray-750 message-bubble">
            <p>"The reported bug seems to be related to the recent database migration. Investigating further..."</p>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-xs mt-1 block tracking-wide">View Issue</a>
          </div>
        </div>
      </div>

      <!-- Activity Item 3 -->
      <div class="py-4 flex items-start space-x-4 group
                  relative z-10
                  bg-white dark:bg-gray-850 rounded-lg p-3
                  transform transition-all duration-200 ease-in-out
                  active:translate-y-px active:shadow-inner hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-900">
        <div class="flex-shrink-0 relative">
          <div class="flex items-center justify-center h-12 w-12 rounded-full ring-2 ring-orange-500 dark:ring-orange-400 bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-300 shadow-md user-avatar-placeholder">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
              </path>
            </svg>
          </div>
          <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-850 bg-orange-400" aria-hidden="true"></span>
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-snug">
            <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">Marketing Team</a> <span class="font-normal text-gray-600 dark:text-gray-400">updated document</span>
            <span class="text-orange-600 dark:text-orange-400 font-medium ml-1">"Q4 Strategy Plan"</span>
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">
            <time datetime="2023-10-25T16:00">Yesterday at 4:00 PM</time>
          </p>
          <div class="mt-2 flex items-center space-x-2 p-2 bg-gray-100 dark:bg-gray-825 rounded-md shadow-inner px-3 py-2 border border-gray-200 dark:border-gray-750 message-bubble">
            <img class="h-8 w-8 rounded-sm object-cover shadow-sm ring-1 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/50/50?random=1" alt="Document thumbnail">
            <div>
              <p class="text-sm text-gray-700 dark:text-gray-300">Updated Sections 2.1 and 3.5 with new market research data.</p>
              <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-xs">Download Document</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer / Action Area -->
    <div class="px-6 py-4 bg-gray-100 dark:bg-gray-850 border-t border-gray-200 dark:border-gray-700
                relative z-10 shadow-inner-top skeuo-footer">
      <button type="button" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm
                  text-white bg-blue-600 dark:bg-blue-700
                  hover:bg-blue-700 dark:hover:bg-blue-800
                  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-850
                  skeuo-button transform active:scale-95 transition-all duration-150 ease-in-out">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
        </svg>
        Load More Activities
      </button>
      <p class="mt-3 text-xs text-center text-gray-500 dark:text-gray-400">Latest update 5 minutes ago</p>
    </div>
  </div>

  <!-- Custom Skeuomorphic Styles (via arbitrary values or pseudo-elements not directly in Tailwind classes) -->
  <style>
    .text-shadow-md {
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px rgba(0, 0, 0, 0.2);
    }
    .shadow-inner-lg {
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
    }
    .shadow-inner-top {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
    }
    .dark .shadow-inner-lg {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
    }
    .dark .shadow-inner-top {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -2px 4px rgba(255, 255, 255, 0.02);
    }

    /* Light reflection effect for header */
    .light-reflection {
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    }

    /* Deeper dark mode colors for a more 'recessed' look */
    .dark\:bg-gray-850 {
        background-color: #1a202c; /* Deeper than typical gray-800 */
    }
    .dark\:bg-gray-825 {
        background-color: #28303e; /* Slightly lighter than gray-850 for inner elements */
    }
    .dark\:border-gray-750 {
        border-color: #3b4252; /* Slightly lighter border for inner elements */
    }

    /* Skeuomorphic button style */
    .skeuo-button {
      box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3), inset 0px 1px 0px rgba(255, 255, 255, 0.2);
    }
    .skeuo-button:hover {
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.2);
    }
    .skeuo-button:active {
      box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.4), inset 0px -1px 0px rgba(255, 255, 255, 0.1);
    }
    .dark .skeuo-button {
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.6), inset 0px 1px 0px rgba(255, 255, 255, 0.05);
    }
    .dark .skeuo-button:hover {
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.7), inset 0px 1px 0px rgba(255, 255, 255, 0.05);
    }
    .dark .skeuo-button:active {
        box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.7), inset 0px -1px 0px rgba(255, 255, 255, 0.02);
    }

    /* Activity item interaction */
    .group:active {
       transform: translateY(1px);
       box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) /* Subtle inner shadow for 'pressed' effect */
    }
    .dark .group:active {
       box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) /* Darker inner shadow for 'pressed' effect */
    }

    /* General Skeuomorphic depth for buttons, avatars, etc. */
    .user-avatar, .user-avatar-placeholder, .message-bubble, .skeuo-footer {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15), -2px -2px 5px rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(255,255,255,0.4);
    }
    .skeuo-footer {
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.15), 0 2px 5px rgba(255, 255, 255, 0.1);
    }
    .dark .user-avatar, .dark .user-avatar-placeholder, .dark .message-bubble, .dark .skeuo-footer {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6), -2px -2px 5px rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255,255,255,0.05);
    }
    .dark .skeuo-footer {
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(255, 255, 255, 0.02);
    }

    /* Pseudo 3D effect for the main container */
    @media (min-width: 768px) {
        .perspective-1000 {
            perspective: 1000px;
        }
        .rotateX-3 {
            transform: rotateX(3deg);
        }
        .rotateY-2 {
            transform: rotateY(2deg);
        }
        /* Ensuring transform applies to its own layer for smooth transition */
        transform: translateZ(0);
    }

    /* Ensure smooth transitions for dark mode color changes */
    html.dark * {
      transition-property: background-color, border-color, color, fill, stroke, box-shadow;
      transition-duration: 200ms;
    }
  </style>
</div>

Search Components

Categories

Activity Feed