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

ActivityFeedComponent

블로그 콘텐츠 소비를 위해 설계된 간단한 레트로/빈티지 스타일의 활동 피드 구성 요소로, 단색 파란색 구성표와 Tailwind CSS를 사용한 반응형 다크 모드 지원이 특징입니다.

미리 보기

HTML 코드 

<!-- Activity Feed Component: Retro/Vintage Monochromatic Style -->
<section aria-labelledby="activity-feed-title" class="bg-blue-50 dark:bg-blue-900 border-2 border-dashed border-blue-300 dark:border-blue-700 rounded-lg shadow p-6 max-w-md md:max-w-lg lg:max-w-xl mx-auto">
  <h2 id="activity-feed-title" class="uppercase tracking-widest text-2xl font-mono text-blue-900 dark:text-blue-100 pb-2 mb-4 border-b-2 border-dashed border-blue-300 dark:border-blue-700">
    Activity Feed
  </h2>
  <div class="divide-y divide-blue-200 dark:divide-blue-700">
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Alice</span> published a new post <a href="#" class="underline">Understanding Tailwind CSS</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">2 hours ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/65.jpg" alt="Bob avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Bob</span> commented on <a href="#" class="underline">10 CSS Tricks You Should Know</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">5 hours ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Carol avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Carol</span> liked the post <a href="#" class="underline">Building Responsive Layouts</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">1 day ago</p>
      </div>
    </div>
    <div class="flex items-center space-x-4 py-3">
      <img class="h-10 w-10 rounded-full border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Dave avatar">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-mono text-blue-800 dark:text-blue-200">
          <span class="font-bold">Dave</span> published a new post <a href="#" class="underline">A Retro Design Revival</a>
        </p>
        <p class="text-xs text-blue-600 dark:text-blue-400">2 days ago</p>
      </div>
    </div>
  </div>
</section>

관련 구성 요소

Activity Feed 구성 요소

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

열다

Retro_Healthcare_Activity_Feed

헬스케어 애플리케이션을 위한 레트로/빈티지의 생생한 활동 피드 구성 요소로, 80년대/90년대 미학으로 설계되었으며, 반응형 및 다크 모드 지원을 통한 알림 및 업데이트를 제공합니다.

열다

Activity Feed 구성 요소

부동산 플랫폼을 위한 복잡한 3D에서 영감을 받은 활동 피드 구성 요소로, 어스 톤, 반응형 디자인 및 다크 모드 지원을 특징으로 합니다. 다양한 속성 관련 작업을 표시합니다.

열다