Компонент ленты действий
Простой, отзывчивый компонент ленты активности с осенней эстетикой киберпанка, с темным фоном, насыщенными оранжевыми, коричневыми и бордовыми тонами, подходящий для спортивных и фитнес-приложений. Включает поддержку темного режима.
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>Связанные компоненты
Компонент ленты действий 41
Адаптивный компонент ленты действий со стилем 3D-дизайна, включающий эффекты глубины и поддержку темной темы, созданный с помощью Tailwind CSS.
Компонент ленты действий
Компонент ленты действий в стиле ретро/винтаж для демонстрации работ или продуктов. Дизайн выполнен в аналогичной цветовой гамме с поддержкой темной темы. Компонент интерактивен и отзывчив, подходит для использования в портфолио.
Компонент ленты действий
Адаптивный компонент ленты действий, выполненный в 3D-стиле с поддержкой темных тем, включая трехмерные элементы для глубины и вовлеченности.