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.
Codice HTML
<!-- 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>Componenti correlati
Retro_Healthcare_Activity_Feed
Un componente di feed di attività vibrante retrò/vintage per applicazioni sanitarie, progettato con un'estetica anni '80/'90, con notifiche e aggiornamenti con supporto per la modalità reattiva e oscura.
Componente Feed attività
Un componente reattivo del feed attività progettato in uno stile ispirato alla carta/stampa con toni seppia/marrone, adatto per forum e piattaforme di community. Include il supporto per la modalità oscura.
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.