Cerca componenti

Categorie

Componenti Feed attività

Feed attività

Flusso di attività dell'utente o del sistema

Feed attività monocromatico brutalista

Un semplice componente del feed attività di ispirazione brutalista con una combinazione di colori monocromatica, adatto per siti Web aziendali/aziendali. Presenta un contrasto elevato, una tipografia audace e una reattività completa con il supporto della modalità scura.

Aperto Anteprima

                <div class="font-mono min-h-screen bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-4xl mx-auto border-4 border-black dark:border-white bg-gray-200 dark:bg-gray-800 shadow-md transform -rotate-1 skew-x-1 p-0.5">
    <div class="bg-gray-50 dark:bg-gray-950 p-6 sm:p-8 lg:p-10 border-4 border-black dark:border-white transform rotate-1 -skew-x-1">
      <h2 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 text-black dark:text-white uppercase leading-none skew-y-2 transform -translate-x-2">
        Activity <br class="sm:hidden"/>Feed
      </h2>

      <div class="space-y-6 sm:space-y-8 lg:space-y-10">
        <!-- Activity Item 1: New Project -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <span class="absolute -top-3 -left-3 bg-red-600 text-white text-xs px-2 py-1 uppercase font-bold transform rotate-6">NEW!</span>
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">John Doe</span> created <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Project Alpha'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">2 hours ago</p>
            </div>
          </div>
        </div>

        <!-- Activity Item 2: Task Update -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform rotate-2" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">Jane Smith</span> updated <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Task #123'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">4 hours ago</p>
            </div>
          </div>
        </div>

        <!-- Activity Item 3: File Upload -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-5" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">Robert Brown</span> uploaded <span class="text-black dark:text-white underline decoration-wavy decoration-2">'report_Q3.pdf'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">Yesterday</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="absolute bottom-2 right-2 text-xs text-black dark:text-white font-bold transform -rotate-3">LIVE FEED</div>
  </div>
</div>

Componente Feed attività

Componente Brutalist Activity Feed per siti Web aziendali/aziendali con combinazione di colori analoga, complessità moderata, design reattivo e supporto per temi scuri.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 border-4 border-black dark:border-gray-700 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#4a5568] p-6 space-y-6">
    <h1 class="text-3xl md:text-4xl font-extrabold text-black dark:text-gray-100 uppercase border-b-4 border-black dark:border-gray-700 pb-2 mb-6">
      Activity Feed
    </h1>

    <!-- Activity Item 1 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-yellow-100 dark:bg-yellow-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">John Doe</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">created a new <span class="text-red-700 dark:text-red-400 font-semibold">project proposal</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">2 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 2 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-pink-100 dark:bg-pink-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Jane Smith</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">updated <span class="text-blue-700 dark:text-blue-400 font-semibold">marketing strategy document</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">5 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 3 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-green-100 dark:bg-green-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Michael Brown</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">completed <span class="text-purple-700 dark:text-purple-400 font-semibold">Q3 financial report</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 day ago</p>
      </div>
    </div>

    <!-- Activity Item 4 - With an image -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-orange-100 dark:bg-orange-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Sarah Davis</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">uploaded new images to <span class="text-teal-700 dark:text-teal-400 font-semibold">product showcase</span>:</p>
        <div class="mt-2 grid grid-cols-2 gap-2">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/237/200/150" alt="Product Image 1">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/238/200/150" alt="Product Image 2">
        </div>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">3 days ago</p>
      </div>
    </div>

    <!-- Activity Item 5 - Complex with multiple actions -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-purple-100 dark:bg-purple-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">David Wilson</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">reviewed <span class="text-indigo-700 dark:text-indigo-400 font-semibold">client feedback report</span> and left 3 comments:</p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-400 text-sm mt-2 space-y-1">
          <li>"Consider revising section 3.1 for clarity."</li>
          <li>"Great work on the data analysis!"</li>
          <li>"Meeting scheduled to discuss next steps."</li>
        </ul>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 week ago</p>
      </div>
    </div>

  </div>
</div>

Componente ActivityFeed

Un semplice componente del feed di attività in stile retrò/vintage progettato per il consumo di contenuti del blog, con una combinazione di colori blu monocromatica e supporto per la modalità oscura reattiva utilizzando Tailwind CSS.

Aperto Anteprima

                <!-- Activity Feed Component: Retro/Vintage Monochromatic Style -->
<section aria-labelledby="activity-feed-title" class="bg-blue-50 dark:bg-blue-900 border-2 border-dashed border-blue-300 dark:border-blue-700 rounded-lg shadow p-6 max-w-md md:max-w-lg lg:max-w-xl mx-auto">
  <h2 id="activity-feed-title" class="uppercase tracking-widest text-2xl font-mono text-blue-900 dark:text-blue-100 pb-2 mb-4 border-b-2 border-dashed border-blue-300 dark:border-blue-700">
    Activity Feed
  </h2>
  <div class="divide-y divide-blue-200 dark:divide-blue-700">
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Alice</span> published a new post <a href="#" class="underline">Understanding Tailwind CSS</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">2 hours ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/65.jpg" alt="Bob avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Bob</span> commented on <a href="#" class="underline">10 CSS Tricks You Should Know</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">5 hours ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Carol avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Carol</span> liked the post <a href="#" class="underline">Building Responsive Layouts</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">1 day ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Dave avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Dave</span> published a new post <a href="#" class="underline">A Retro Design Revival</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">2 days ago</p>
      </div>
    </div>
  </div>
</section>

Componente Feed attività

Componente Activity Feed con estetica Retrò/Vintage anni '80/'90, combinazione di colori monocromatici, complessità moderata per il consumo di blog/contenuti. Design reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Immagini da picsum.photos e avatar da randomuser.me.

Aperto Anteprima

                <div class="container mx-auto px-4 py-8 bg-gray-200 dark:bg-gray-800">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Activity Feed</h2>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">posted a new article</p>
      </div>
    </div>
    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">The Future of Web Development</h3>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>2 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
    </div>
  </div>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">Jane Smith</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">commented on a post</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Great insightful article, John! I learned a lot.</p>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>4 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View post</a>
    </div>
  </div>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">Peter Jones</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">liked an article</p>
      </div>
    </div>
    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">10 Tips for Better Productivity</h3>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>6 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View article</a>
    </div>
  </div>
</div>

Componente Feed attività

Un componente del feed attività in stile retrò/vintage per mostrare lavori o prodotti. Il design presenta una combinazione di colori analoga con supporto per il tema scuro. La componente è interattiva e responsive, adatta all'utilizzo in portafoglio.

Aperto Anteprima

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Activity Feed</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-300">Published a new project: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Retro Aesthetic App</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
                <p class="text-gray-600 dark:text-gray-300">Shared a new blog post: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Top 10 Vintage Designs</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h3>
                <p class="text-gray-600 dark:text-gray-300">Created a new collection: <a href="#" class="text-blue-500 dark:text-blue-300 underline">90s Nostalgia Gallery</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/women/34.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h3>
                <p class="text-gray-600 dark:text-gray-300">Updated her portfolio: <a href="#" class="text-blue-500 dark:text-blue-300 underline">My Retro Journey</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">8 hours ago</span>
            </div>
        </div>
    </div>
</div>

Componente Feed attività

Componente Feed attività con stile Glassmorphism, combinazione di colori vivaci, complessità moderata e supporto per temi scuri reattivi.

Aperto Anteprima

                <div class="relative antialiased px-4 dark:bg-gray-900 min-h-screen">
    <div class="max-w-xl mx-auto">
        <div class="relative">
            <span class="absolute top-0 left-2/4 -ml-px h-full" aria-hidden="true">
                <span class="w-0.5 h-full bg-gray-300 block dark:bg-gray-700"></span>
            </span>

            <ul class="relative">
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-500 flex-shrink-0 shadow">
                            <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.004 9.004 0 01-4.964-1.484L3 20l1.395-3.493A8.968 8.968 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-indigo-500 dark:text-white">Alex Shatov</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Preached to the choir about the importance of having a plan.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-pink-500 flex-shrink-0 shadow">
                            <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 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6H4m6 6H4m6 0v2m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6h2m-2 0h2m0 6h2m0-6v2"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:text-white">Mark Cameron</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">2hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Discussed the benefits of a healthy diet and exercise.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-teal-500 flex-shrink-0 shadow animate-pulse">
                            <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="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-teal-500 dark:text-white">Drew Berry</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">10hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Is working on a new project.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-fuchsia-500 flex-shrink-0 shadow">
                            <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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-fuchsia-500 dark:text-white">Danielle Price</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1 day ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Completed the quarterly report.</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Componente Feed attività

Componente feed attività reattivo per blog/contenuti con design 3D semplice, combinazione di colori pastello, supporto per temi scuri e CSS Tailwind.

Aperto Anteprima

                <section class="bg-gray-100 dark:bg-gray-900 py-8 lg:py-16 antialiased">
  <div class="max-w-2xl mx-auto px-4">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Activity Feed</h2>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg mb-6 relative">
      <div class="absolute inset-0 border-2 border-indigo-300 dark:border-indigo-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">John Doe posted a new article</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">Read more</a>
    </article>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg mb-6 relative">
        <div class="absolute inset-0 border-2 border-pink-300 dark:border-pink-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">Jane Smith commented on a post</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">View comment</a>
    </article>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg relative">
        <div class="absolute inset-0 border-2 border-teal-300 dark:border-teal-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">Peter Jones liked an article</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">View article</a>
    </article>

  </div>
</section>

Componente Feed attività

Feed attività dal design minimalista/piatto per l'e-commerce, monocromatico, semplice, reattivo, tema scuro

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Activity Feed</h3>
  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">John Doe</span> placed an order.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">2 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Jane Smith</span> reviewed a product.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">5 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Robert Brown</span> added item to cart.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">10 hours ago</span>
    </li>
  </ul>
</div>

Componente Feed attività

Un componente del feed attività in stile retrò/vintage progettato per mostrare lavori o prodotti con colori ad alta saturazione, elementi interattivi e supporto per la modalità scura.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-center text-violet-600 dark:text-violet-300 mb-6">Activity Feed</h2>
    <div class="space-y-4">
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-violet-600 dark:border-violet-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Added a new project: <span class="text-violet-600 dark:text-violet-300">Awesome Website</span></p>
                <p class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-600 dark:border-green-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Uploaded a new image.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">1 day ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-600 dark:border-blue-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Emily Carter</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your post.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">3 days ago</p>
            </div>
        </div>
        <div class="flex items-start space-x-3">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-600 dark:border-red-300">
            <div class="flex-1">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-300">Sarah Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you.</p>
                <p class="text-sm text-gray-500 dark:text-gray-500">4 days ago</p>
            </div>
        </div>
    </div>
    <button class="mt-6 w-full py-2 px-4 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg shadow focus:outline-none transition duration-200 dark:bg-violet-300 dark:hover:bg-violet-200">Load More</button>
</div>

Componente Feed attività

Un componente complesso del feed attività progettato per mostrare i contenuti del blog con più elementi interattivi. Incorpora uno stile di progettazione 3D e una combinazione di colori complementari. Supporta il design reattivo e il tema scuro.

Aperto Anteprima

                <div class="max-w-2xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Activity Feed</h2>
    <div class="space-y-6">
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-green-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">John Doe</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 2 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Exploring Tailwind CSS</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Join me as we dive into the world of Tailwind CSS, a utility-first CSS framework.</p>
            <img src="https://picsum.photos/400/200?random=1" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-green-500">Like</button>
                <button class="hover:text-green-500">Comment</button>
            </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-blue-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 3 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Understanding CSS Grid</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">CSS Grid is an amazing layout system that allows for two-dimensional layouts.</p>
            <img src="https://picsum.photos/400/200?random=2" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-blue-500">Like</button>
                <button class="hover:text-blue-500">Comment</button>
            </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-red-500">
            <div class="flex items-center space-x-4 mb-2">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">Mark Johnson</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted 4 hours ago</p>
                </div>
            </div>
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Responsive Design Basics</h4>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Learn the fundamental principles of creating responsive web designs.</p>
            <img src="https://picsum.photos/400/200?random=3" alt="Feed Image" class="w-full rounded-lg mb-2">
            <div class="flex justify-between text-gray-500 dark:text-gray-400">
                <button class="hover:text-red-500">Like</button>
                <button class="hover:text-red-500">Comment</button>
            </div>
        </div>
    </div>
</div>