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.
HTML Code
<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>Composants associés
Composant Flux d’activités
Composant de flux d’activité réactif pour le blog/contenu avec une conception 3D simple, une palette de couleurs pastel, la prise en charge du thème sombre et le CSS Tailwind.
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.
Composant Flux d’activités
Composant de flux d’activité réactif conçu pour l’interface utilisateur en mode sombre à l’aide de Tailwind CSS.