ActivityFeedComponent
Un componente de feed de actividades simple de estilo retro / vintage diseñado para el consumo de contenido de blog, con un esquema de color azul monocromático y soporte de modo oscuro receptivo usando Tailwind CSS.
Código 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>Componentes relacionados
Componente de fuente de actividad
Un componente de alimentación de actividades orgánicas/inspiradas en la naturaleza para sitios web de eventos y conferencias, con líneas fluidas, tonos tierra y elementos interactivos ricos. Totalmente receptivo con soporte para modo oscuro.
Componente de fuente de actividad
Un componente complejo de fuente de actividades diseñado para mostrar el contenido del blog con múltiples elementos interactivos. Incorpora un estilo de diseño 3D y una combinación de colores complementaria. Admite diseño responsivo y tema oscuro.
Componente de fuente de actividad
Un componente de fuente de actividad receptivo diseñado en un estilo 3D con soporte para temas oscuros, que incorpora elementos tridimensionales para mayor profundidad y participación.