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 구성 요소

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

열다