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 de flux d’activité
Un composant de flux d’activité complexe et réactif avec des effets de néon/lueur et des couleurs vives, adapté aux applications de crypto-monnaie/blockchain, avec prise en charge du mode sombre.
Composant Flux d’activités
Il s’agit d’un composant complexe de flux d’activité conçu pour présenter le contenu d’un blog avec plusieurs éléments interactifs. Intègre un style de conception 3D et une palette de couleurs complémentaires. Prend en charge le design réactif et le thème sombre.
Composant Flux d’activités
Composant de flux d’activité avec une esthétique rétro/vintage des années 80/90, une palette de couleurs monochromatiques, une complexité modérée pour la consommation de blog/contenu. Conception réactive avec prise en charge du mode sombre à l’aide de Tailwind CSS. Images de picsum.photos et avatars de randomuser.me.