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

Activity Feed 구성 요소

뉴모픽 디자인 스타일의 반응형 활동 피드 구성 요소로, 밝은 테마와 어두운 테마를 모두 지원합니다.

미리 보기

HTML 코드 

<div class='flex flex-col items-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg'>
    <h2 class='text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4'>Activity Feed</h2>
    <div class='w-full space-y-4'>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>John Doe</p>
                    <p class='text-gray-500 dark:text-gray-400'>Added a new post.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Jane Smith</p>
                    <p class='text-gray-500 dark:text-gray-400'>Commented on your photo.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Mark Johnson</p>
                    <p class='text-gray-500 dark:text-gray-400'>Liked your comment.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Emily Davis</p>
                    <p class='text-gray-500 dark:text-gray-400'>Started following you.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://picsum.photos/200/200' alt='Random Image' class='w-10 h-10 mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Random Image</p>
                    <p class='text-gray-500 dark:text-gray-400'>Posted a new image.</p>
                </div>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Activity Feed 구성 요소

작품이나 제품을 선보이기 위한 레트로/빈티지 스타일의 활동 피드 구성 요소입니다. 이 디자인은 어두운 테마를 지원하는 유사한 색 구성표를 특징으로 합니다. 이 구성 요소는 상호 작용하고 반응형이며 포트폴리오 사용에 적합합니다.

열다

Activity Feed 구성 요소

Neumorphism 디자인, 흙색 색 구성표, 복잡한 레이아웃, 반응형 디자인 및 어두운 테마 지원이 포함된 활동 피드 구성 요소입니다.

열다

Activity Feed 구성 요소

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

열다