CCHub Logo CCHub Tailwind Collection
구성 요소 커뮤니티 포럼 Community Forum 구성 요소

Community Forum 구성 요소

머티리얼 디자인 원칙을 활용하는 간단한 커뮤니티 포럼 구성 요소로, 어스 톤 색 구성표와 함께 블로그 콘텐츠 소비에 맞게 조정되고 다크 모드 지원을 위한 반응형 디자인입니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <div class="mb-4">
        <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Latest Discussions</h3>
        <ul class="list-disc list-inside space-y-3 mt-2">
            <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
                <div class="flex items-center">
                    <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1">
                    <div>
                        <p class="text-gray-800 dark:text-white font-bold">John Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">What are your thoughts on the new features?</p>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
            </li>
            <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
                <div class="flex items-center">
                    <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User 2">
                    <div>
                        <p class="text-gray-800 dark:text-white font-bold">Jane Smith</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">Can someone recommend a good blog to follow?</p>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
            </li>
        </ul>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Create a new topic</h3>
        <form class="mt-4">
            <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="What's on your mind?"></textarea>
            <button class="mt-2 bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none" type="submit">Post</button>
        </form>
    </div>
</div>

관련 구성 요소

커뮤니티 포럼 구성 요소 - Glassmorphism E-commerce

전자 상거래를 위한 glassmorphism 스타일의 커뮤니티 포럼 구성 요소로, 반투명 요소, 흐림 효과 및 트라이어딕 색 구성표를 특징으로 합니다. 다크 모드 지원으로 반응형.

열다

Community Forum 구성 요소

Brutalism 스타일로 디자인된 커뮤니티 포럼 구성 요소로, 생생한 색 구성표가 있어 전자 상거래 경험에 적합합니다. 여기에는 게시물, 댓글 및 사용자 프로필과 같은 다양한 대화형 요소가 포함되어 있으며, 모두 어두운 테마를 지원하는 반응형 디자인을 위해 Tailwind CSS로 스타일이 지정되었습니다.

열다

Community Forum 구성 요소

전자 상거래를 위한 미니멀리스트 커뮤니티 포럼 구성 요소로, 깔끔한 디자인, 트라이어딕 색 구성표 및 다크 모드 지원을 특징으로 합니다.

열다