CCHub Logo CCHub Tailwind Collection
구성 요소 활동 피드 Activity Feed 구성 요소

Activity Feed 구성 요소

사이버펑크 가을 미학을 가진 단순하고 반응이 빠른 활동 피드 구성 요소로, 어두운 배경, 풍부한 주황색, 갈색 및 버건디 톤을 특징으로 하며 스포츠/피트니스 애플리케이션에 적합합니다. 다크 모드 지원이 포함됩니다.

미리 보기

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]">&gt;</span> Distance: 5.0 km</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Time: 23:45</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</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]">&gt;</span> Date: 2023-11-10</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Time: 18:00 EST</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</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>

관련 구성 요소

Activity Feed 구성 요소

마이크로 인터랙션과 어두운 테마가 있는 전자 상거래를 위한 복잡한 활동 피드 구성 요소로, Tailwind CSS를 사용하여 스타일링되었습니다.

열다

Activity Feed 구성 요소

단순한 3D 디자인, 파스텔 색 구성표, 어두운 테마 지원 및 Tailwind CSS를 사용하는 블로그/콘텐츠용 반응형 활동 피드 구성 요소.

열다

Activity Feed 구성 요소

브루탈리즘 스타일의 Activity Feed Component는 반응형 디자인, 고대비 레이아웃, Tailwind CSS를 사용한 다크 모드 지원을 제공합니다.

열다