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

Community Forum 구성 요소

Tailwind CSS를 사용하여 다크 모드로 스타일링된 반응형 커뮤니티 포럼 컴포넌트입니다. 이 구성 요소는 눈의 피로를 줄이기 위해 어두운 배경을 특징으로 하며 아바타 및 포럼 게시물에 대한 자리 표시자 이미지를 포함합니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg max-w-3xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Community Forum</h2>
    <div class="mb-4">
        <h3 class="text-xl font-semibold">Latest Discussions</h3>
        <div class="mt-4">
            <div class="bg-gray-800 p-4 rounded-lg mb-4">
                <div class="flex items-center mb-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                    <div>
                        <h4 class="font-semibold">John Doe</h4>
                        <span class="text-gray-400 text-sm">2 hours ago</span>
                    </div>
                </div>
                <p class="text-gray-300">What are the best practices for learning JavaScript?</p>
                <div class="flex justify-between mt-2">
                    <span class="text-gray-400">5 replies</span>
                    <span class="text-gray-400">10 likes</span>
                </div>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg mb-4">
                <div class="flex items-center mb-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                    <div>
                        <h4 class="font-semibold">Jane Smith</h4>
                        <span class="text-gray-400 text-sm">3 hours ago</span>
                    </div>
                </div>
                <p class="text-gray-300">Any recommendations for a good code editor?</p>
                <div class="flex justify-between mt-2">
                    <span class="text-gray-400">2 replies</span>
                    <span class="text-gray-400">5 likes</span>
                </div>
            </div>
        </div>
    </div>
    <div class="mb-4">
        <h3 class="text-xl font-semibold">Join the Conversation</h3>
        <form class="mt-4 space-y-4">
            <textarea class="w-full p-2 rounded-lg bg-gray-800 text-white placeholder-gray-400 resize-none" rows="4" placeholder="Share your thoughts..."></textarea>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Post</button>
        </form>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg mt-4">
        <h3 class="text-xl font-semibold mb-2">Popular Topics</h3>
        <ul class="space-y-2">
            <li class="bg-gray-700 p-2 rounded">#JavaScript</li>
            <li class="bg-gray-700 p-2 rounded">#React</li>
            <li class="bg-gray-700 p-2 rounded">#TailwindCSS</li>
            <li class="bg-gray-700 p-2 rounded">#NodeJS</li>
            <li class="bg-gray-700 p-2 rounded">#WebDevelopment</li>
        </ul>
    </div>
</div>

관련 구성 요소

Community Forum 구성 요소

뉴모피즘(Neumorphism) 스타일의 커뮤니티 포럼 컴포넌트(Forum Component)에는 아바타, 스레드, 어두운 테마가 포함되어 있습니다.

열다

Community Forum 구성 요소

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

열다

커뮤니티 포럼 구성 요소 9

커뮤니티 포럼 구성 요소로, 젖빛 유리와 같은 반투명 요소, 반응형 효과 및 어두운 테마 지원이 있는 glassmorphism 디자인을 특징으로 합니다.

열다