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 de estilo brutalista con diseño responsivo, diseños de alto contraste y compatibilidad con el modo oscuro mediante CSS de Tailwind.
Componente de fuente de actividad
Componente de alimentación de actividades con estética retro / vintage de los años 80 / 90, combinación de colores monocromática, complejidad moderada para el consumo de blog / contenido. Diseño responsivo con soporte para modo oscuro usando Tailwind CSS. Imágenes de picsum.photos y avatares de randomuser.me.
Componente de fuente de actividad
Un componente de alimentación de actividades receptivo con un estilo de diseño neumórfico, que admite temas claros y oscuros.