ActivityFeedComponent
Un composant simple de flux d’activité de style rétro/vintage conçu pour la consommation de contenu de blog, avec une palette de couleurs bleues monochromatiques et une prise en charge réactive du mode sombre à l’aide de Tailwind CSS.
HTML Code
<!-- 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>Composants associés
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.
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.
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