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 de flux d’activité avec conception matérielle, jeu de couleurs en niveaux de gris, complexité modérée et prise en charge du mode sombre

Ouvrir l’aperçu

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

Composant Flux d’activités

Composant de flux d’activités réactif avec un style de conception neumorphique, prenant en charge les thèmes clairs et sombres.

Ouvrir l’aperçu

                <div class='flex flex-col items-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg'>
    <h2 class='text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4'>Activity Feed</h2>
    <div class='w-full space-y-4'>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>John Doe</p>
                    <p class='text-gray-500 dark:text-gray-400'>Added a new post.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Jane Smith</p>
                    <p class='text-gray-500 dark:text-gray-400'>Commented on your photo.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Mark Johnson</p>
                    <p class='text-gray-500 dark:text-gray-400'>Liked your comment.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Emily Davis</p>
                    <p class='text-gray-500 dark:text-gray-400'>Started following you.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://picsum.photos/200/200' alt='Random Image' class='w-10 h-10 mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Random Image</p>
                    <p class='text-gray-500 dark:text-gray-400'>Posted a new image.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Composant Flux d’activités

Un composant de flux d’activité de style brutaliste avec un design réactif, des mises en page à contraste élevé et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg p-4 max-w-md w-full">
    <h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Activity Feed</h1>
    <div class="space-y-4">
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Posted a new article</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">10 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your post</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">15 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Brown</p>
                <p class="text-gray-600 dark:text-gray-400">Liked your photo</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">30 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Emma Wilson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">1 hour ago</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full h-32 object-cover rounded-md shadow-md" />
    </div>
</div>

Composant Flux d’activités

Composant de flux d’activité réactif conçu pour l’interface utilisateur en mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Activity Feed</h2>
    <ul class="space-y-4">
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">John Doe</p>
                <p class="text-gray-400">Commented on your post</p>
                <span class="text-gray-500 text-sm">2 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Jane Smith</p>
                <p class="text-gray-400">Liked your photo</p>
                <span class="text-gray-500 text-sm">4 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Sam Wilson</p>
                <p class="text-gray-400">Started following you</p>
                <span class="text-gray-500 text-sm">6 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Lisa Ray</p>
                <p class="text-gray-400">Shared your article</p>
                <span class="text-gray-500 text-sm">1 day ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Michael Brown</p>
                <p class="text-gray-400">Added a photo</p>
                <span class="text-gray-500 text-sm">2 days ago</span>
            </div>
        </li>
    </ul>
</div>

Composant Flux d’activités

Un composant de flux d’activité réactif conçu dans un style 3D avec prise en charge du thème sombre, incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">  
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Liked your post about web development.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your picture.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">5 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">1 day ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Emily Davis</p>
                <p class="text-gray-600 dark:text-gray-400">Shared your post.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">3 days ago</span>
            </div>
        </div>
    </div>
    
    <div class="mt-6 text-center">
        <img class="rounded-lg transition-transform transform hover:scale-105" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image">
    </div>
</div>

Flux d’activités Composante 41

Un composant de flux d’activité réactif avec un style de conception 3D, intégrant des effets de profondeur et la prise en charge des thèmes sombres, construit avec Tailwind CSS.

Ouvrir l’aperçu

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg transform hover:scale-105 transition-transform duration-200 ease-in-out">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Activity Feed</h2>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">John Doe</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Just created a new project!</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">2 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Jane Smith</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Liked your post.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">10 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Steve Brown</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Commented on your photo.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">20 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Alice Johnson</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Started following you.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">30 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Michael Green</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Updated his status.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">1 hour ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Emily Davis</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Shared a photo.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">2 hours ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Chris Black</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Joined the group.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">3 hours ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Olivia White</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Sent you a message.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">4 hours ago</p>
        </div>
    </div>
</div>