Rechercher des composants

Catégories

Composants Flux d’activité

Flux d’activité

Flux d’activités de l’utilisateur ou du système

Composant Flux d’activités

Composant d’alimentation d’activité en mode sombre complexe et monochrome pour les applications de sport/fitness, présentant diverses interactions avec les utilisateurs, les réalisations et les mises à jour de manière réactive.

Ouvrir Aperçu

                <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>

Composant Flux d’activités

Un composant complexe de flux d’activité inspiré de la 3D pour les plateformes immobilières, avec des tons de terre, un design réactif et la prise en charge du mode sombre. Affiche diverses activités liées à l’immobilier.

Ouvrir Aperçu

                <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

Un composant de flux d’activité dynamique rétro/vintage pour les applications de santé, conçu avec une esthétique des années 80/90, avec des notifications et des mises à jour avec une prise en charge réactive et en mode sombre.

Ouvrir Aperçu

                <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>

Composant Flux d’activités

Un composant de flux d’activités inspiré de l’agriculture organique et de la nature pour les sites Web d’événements et de conférences, avec des lignes fluides, des tons de terre et des éléments interactifs riches. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Flux d’activité brutaliste

Un composant d’alimentation d’activité d’inspiration brutaliste pour les applications SaaS, avec une palette de couleurs terre, un contraste élevé et une esthétique de conception brute. Réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de flux d’activité

Un composant de flux d’activité réactif conçu dans un style inspiré du papier/de l’impression avec des tons sépia/bruns, adapté aux forums et aux plateformes communautaires. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de flux d’activité

Un composant de flux d’activité complexe et réactif avec des effets de néon/lueur et des couleurs vives, adapté aux applications de crypto-monnaie/blockchain, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de flux d’activité

Un composant de flux d’activité simple et réactif avec une esthétique cyberpunk-automnale, avec des arrière-plans sombres, des oranges riches, des bruns et des tons bordeaux, adapté aux applications de sport/fitness. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de flux d’activité

Un composant de flux d’activité réactif avec un design inspiré du Bauhaus, avec un monochome noir et blanc avec un accent de couleur primaire, adapté aux applications technologiques/SaaS. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de flux d’activité

Un composant de flux d’activités conçu avec une esthétique skeuomorphe, utilisant une palette de couleurs triadique adaptée aux sites Web d’entreprise. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <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>