CCHub Logo CCHub Tailwind Collection
구성 요소 활동 피드 브루탈리스트 활동 피드

브루탈리스트 활동 피드

SaaS 애플리케이션을 위한 브루탈리즘에서 영감을 받은 활동 피드 구성 요소로, 흙빛 색 구성표, 높은 대비 및 원시 디자인 미학을 특징으로 합니다. 다크 모드 지원으로 반응형.

미리 보기

HTML 코드 

<div class="p-4 sm:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen font-mono text-stone-800 dark:text-stone-200">
  <div class="max-w-4xl mx-auto border-4 border-stone-900 dark:border-stone-100 p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 shadow-[8px_8px_0_0_#444] dark:shadow-[8px_8px_0_0_#999]">
    <h2 class="text-3xl sm:text-4xl font-bold mb-6 text-stone-900 dark:text-stone-100 uppercase tracking-widest border-b-4 border-stone-900 dark:border-stone-100 pb-2">
      Activity Log
    </h2>

    <div class="space-y-6">

      <!-- Activity Item 1: New Project -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Alex Johnson</span> created a new project
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Quantum Leap Initiative'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">2 hours ago &bull; Project Management</p>
            <div class="mt-3 p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm italic">
              <p>"We're aiming to revolutionize data processing. This is a big one!"</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 2: Task Update -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Dr. Lena Petrova</span> updated task
              <span class="text-blue-800 dark:text-blue-300 font-extrabold">'Implement Auth Module'</span> in
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Secure Core System'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">5 hours ago &bull; Development</p>
            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
              <div class="p-2 border-2 border-yellow-800 dark:border-yellow-300 bg-yellow-300 dark:bg-yellow-800 text-yellow-900 dark:text-yellow-100 font-bold">
                Status: <span class="underline">In Progress</span>
              </div>
              <div class="p-2 border-2 border-orange-800 dark:border-orange-300 bg-orange-300 dark:bg-orange-800 text-orange-900 dark:text-orange-100 font-bold">
                Progress: <span class="underline">65% Complete</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 3: File Upload -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Carlos Rivera</span> uploaded 3 files to
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Marketing Assets 2023'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">1 day ago &bull; Design</p>
            <div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-2">
              <img src="https://picsum.photos/id/1025/300/200" alt="Uploaded Image 1" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://picsum.photos/id/1004/300/200" alt="Uploaded Image 2" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://picsum.photos/id/1008/300/200" alt="Uploaded Image 3" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 4: Comment -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Sarah Chen</span> commented on task
              <span class="text-blue-800 dark:text-blue-300 font-extrabold">'Data Migration Strategy'</span> in
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Legacy System Upgrade'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">2 days ago &bull; Operations</p>
            <div class="mt-3 p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm italic font-semibold">
              <p>"Have we considered the implications of the new GDPR policies on this migration phase? It's critical."</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 5: User Joined -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">David Kim</span> joined the team
              <span class="text-purple-800 dark:text-purple-300 font-extrabold">'Backend Engineers'</span>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">3 days ago &bull; HR System</p>
            <div class="mt-3 flex items-center justify-between p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm ">
              <span class="text-md font-bold"><span class="text-orange-900 dark:text-orange-100">Welcome, David!</span></span>
              <img src="https://picsum.photos/id/1084/80/80" alt="Abstract Icon" class="w-12 h-12 border-2 border-stone-700 dark:border-stone-300 hidden sm:block">
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

관련 구성 요소

Activity Feed 구성 요소

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

열다

Activity Feed 구성 요소

Material Design, Grayscale 색 구성표, 중간 복잡성 및 다크 모드를 지원하는 Activity Feed 구성 요소

열다

Activity Feed 구성 요소

Bauhaus에서 영감을 받은 디자인의 반응형 활동 피드 구성 요소로, 기술/SaaS 애플리케이션에 적합한 기본 색상 액센트가 있는 흑백 모노초메를 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다