Componente de fuente de actividad
Un componente de alimentación de actividad simple y receptivo con una estética otoñal cyberpunk, con fondos oscuros, naranjas intensos, marrones y tonos burdeos, adecuado para aplicaciones deportivas / fitness. Incluye soporte para modo oscuro.
Código HTML
<div class="min-h-screen bg-[#1a0f0f] dark:bg-[#0a0000] p-4 sm:p-6 md:p-8 font-mono text-[#f8a848] dark:text-[#f8d878]">
<div class="max-w-xl mx-auto bg-[#2b1a1a] dark:bg-[#1a0a0a] rounded-lg shadow-lg overflow-hidden border border-[#5c3d2e] dark:border-[#3a1d1d]">
<div class="p-4 sm:p-6 border-b border-[#5c3d2e] dark:border-[#3a1d1d] flex items-center justify-between">
<h2 class="text-xl sm:text-2xl font-bold uppercase text-[#f8a848] dark:text-[#f8d878]">
<span class="text-[#ff6f00] dark:text-[#ff9f48]">//</span> ACTIVITY FEED
</h2>
<span class="text-sm text-[#8c5339] dark:text-[#b87353]">LIVE <span class="animate-pulse text-[#d62828]">•</span></span>
</div>
<div class="divide-y divide-[#3d2929] dark:divide-[#2a1a1a]">
<!-- Activity Item 1 -->
<div class="p-4 sm:p-6 flex items-start space-x-4">
<img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm sm:text-base mb-1">
<strong class="text-[#ff6f00] dark:text-[#ff9f48]">Jake 'The Hammer' Miller</strong> completed <span class="text-[#bf4a24] dark:text-[#e07b39]">5K Run</span>.
</p>
<p class="text-xs text-[#8c5339] dark:text-[#b87353]">15 minutes ago</p>
<div class="mt-2 bg-[#1f1212] dark:bg-[#0f0707] p-3 rounded-md border border-[#3d2929] dark:border-[#2a1a1a] text-sm text-[#f8a848] dark:text-[#f8d878] leading-tight">
<p><span class="text-[#ff6f00] dark:text-[#ff9f48]">></span> Distance: 5.0 km</p>
<p><span class="text-[#ff6f00] dark:text-[#ff9f48]">></span> Time: 23:45</p>
<p><span class="text-[#ff6f00] dark:text-[#ff9f48]">></span> Avg Pace: 4:45/km</p>
</div>
</div>
</div>
<!-- Activity Item 2 -->
<div class="p-4 sm:p-6 flex items-start space-x-4">
<img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm sm:text-base mb-1">
<strong class="text-[#ff6f00] dark:text-[#ff9f48]">Sarah 'Rocket' Lee</strong> joined the <span class="text-[#bf4a24] dark:text-[#e07b39]">'Autumn Marathon Prep' Challenge</span>.
</p>
<p class="text-xs text-[#8c5339] dark:text-[#b87353]">1 hour ago</p>
<div class="mt-2 text-sm text-[#f8a848] dark:text-[#f8d878]">
<img class="w-full max-h-40 object-cover rounded-md border border-[#3d2929] dark:border-[#2a1a1a] mb-2" src="https://picsum.photos/400/250?random=1" alt="Challenge Image">
<p class="text-xs text-[#8c5339] dark:text-[#b87353]">Challenge goal: 42.2 km in 4 weeks.</p>
</div>
</div>
</div>
<!-- Activity Item 3 -->
<div class="p-4 sm:p-6 flex items-start space-x-4">
<img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm sm:text-base mb-1">
<strong class="text-[#ff6f00] dark:text-[#ff9f48]">Coach Dave</strong> updated <span class="text-[#bf4a24] dark:text-[#e07b39]">Team Blaze's Next Practice</span>.
</p>
<p class="text-xs text-[#8c5339] dark:text-[#b87353]">3 hours ago</p>
<div class="mt-2 bg-[#1f1212] dark:bg-[#0f0707] p-3 rounded-md border border-[#3d2929] dark:border-[#2a1a1a] text-sm text-[#f8a848] dark:text-[#f8d878] leading-tight">
<p><span class="text-[#ff6f00] dark:text-[#ff9f48]">></span> Date: 2023-11-10</p>
<p><span class="text-[#ff6f00] dark:text-[#ff9f48]">></span> Time: 18:00 EST</p>
<p><span class="text-[#ff6f00] dark:text-[#ff9f48]">></span> Location: City Sports Arena, Court 3</p>
</div>
</div>
</div>
</div>
<div class="p-4 sm:p-6 border-t border-[#5c3d2e] dark:border-[#3a1d1d] text-center text-xs text-[#8c5339] dark:text-[#b87353]">
<p>DATA STREAM // ENCRYPTED & SECURE</p>
</div>
</div>
</div>Componentes relacionados
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.
Brutalista Monocromático Actividad Feed
Un componente de alimentación de actividades simple de inspiración brutalista con una combinación de colores monocromática, adecuado para sitios web comerciales / corporativos. Cuenta con alto contraste, tipografía audaz y capacidad de respuesta completa con soporte para modo oscuro.
Componente de fuente de actividad
Un componente de alimentación de actividades receptivo diseñado en un estilo inspirado en el papel/impresión con tonos sepia/marrón, adecuado para foros y plataformas comunitarias. Incluye soporte para modo oscuro.