Componenti Feed attività Componente Feed attività

Componente Feed attività

Componente Activity Feed con Material Design, combinazione di colori in scala di grigi, complessità moderata e supporto per la modalità scura

Anteprima

Codice HTML

<div class="container mx-auto px-4 py-8 dark:bg-gray-900">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold text-lg">John Doe</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Posted an update</p>
        </div>
      </div>
      <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-gray-500 dark:text-gray-400 text-sm">
        <span>2 hours ago</span>
        </div>
    </div>

      <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold text-lg">Jane Smith</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Commented on a post</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
        <span>4 hours ago</span>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold text-lg">Peter Jones</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Liked a post</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
       <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
        <span>6 hours ago</span>
       </div>
    </div>
  </div>
</div>

Componenti correlati

Feed attività brutalista

Un componente di feed attività di ispirazione brutalista per applicazioni SaaS, caratterizzato da una combinazione di colori color terra, contrasto elevato e un'estetica dal design grezzo. Reattivo con supporto per la modalità oscura.

Aperto

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

Componente Feed attività

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

Aperto