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

Activity Feed 구성 요소

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

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=3" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-400">Just purchased a new phone!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">5 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=5" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                    <p class="text-gray-600 dark:text-gray-400">Left a review for "Wireless Headphones"!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">10 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=7" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                    <p class="text-gray-600 dark:text-gray-400">Started following you!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">15 minutes ago</p>
                </div>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Activity Feed 구성 요소

세피아/갈색 톤의 종이/인쇄물에서 영감을 받은 스타일로 디자인된 반응형 활동 피드 구성 요소로, 포럼 및 커뮤니티 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Activity Feed 구성 요소

이벤트 및 컨퍼런스 웹 사이트를 위한 유기적/자연에서 영감을 받은 활동 피드 구성 요소로, 흐르는 선, 흙색 및 풍부한 대화형 요소를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

Activity Feed 구성 요소

여러 대화형 요소로 블로그 콘텐츠를 보여주도록 설계된 복잡한 활동 피드 구성 요소입니다. 3D 디자인 스타일과 보색 구성표를 통합합니다. 반응형 디자인과 어두운 테마를 지원합니다.

열다