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

Community Forum 구성 요소

Neumorphism 디자인 스타일을 사용한 반응형 대화형 커뮤니티 포럼 구성 요소로, 비즈니스/기업 웹 사이트에 적합하며 밝은 테마와 어두운 테마를 모두 지원합니다.

미리 보기

HTML 코드 

<div class="container mx-auto px-4">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Community Forum</h2>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Recent Discussions</h3>
        <ul class="mt-4">
            <li class="flex items-start bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4 shadow-lg transition-shadow duration-300 hover:shadow-2xl">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h4>
                    <p class="text-gray-600 dark:text-gray-400">What are the benefits of using Neumorphism in UI design?</p>
                    <span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
                </div>
            </li>
            <li class="flex items-start bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4 shadow-lg transition-shadow duration-300 hover:shadow-2xl">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h4>
                    <p class="text-gray-600 dark:text-gray-400">How to create responsive designs with Tailwind CSS?</p>
                    <span class="text-sm text-gray-500 dark:text-gray-300">5 hours ago</span>
                </div>
            </li>
            <li class="flex items-start bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4 shadow-lg transition-shadow duration-300 hover:shadow-2xl">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
                <div>
                    <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Alex Johnson</h4>
                    <p class="text-gray-600 dark:text-gray-400">What are the key features of a modern forum?</p>
                    <span class="text-sm text-gray-500 dark:text-gray-300">1 day ago</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Create a New Discussion</h3>
        <form class="mt-4">
            <input type="text" placeholder="Title" class="border border-gray-300 rounded-lg p-2 w-full mb-4 bg-gray-100 dark:bg-gray-600 dark:border-gray-700"> 
            <textarea rows="4" placeholder="Write your message..." class="border border-gray-300 rounded-lg p-2 w-full mb-4 bg-gray-100 dark:bg-gray-600 dark:border-gray-700"></textarea>
            <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg px-4 py-2">Post</button>
        </form>
    </div>
</div>

관련 구성 요소

Community Forum 구성 요소

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

열다

Community Forum 구성 요소

파스텔 색상 구성표, 머티리얼 디자인 영향 및 다크 모드 지원이 있는 간단한 커뮤니티 포럼 구성 요소입니다. 블로그/콘텐츠 소비를 위한 반응형 레이아웃을 제공합니다.

열다

Community Forum 구성 요소

Material Design 원칙에 따라 설계된 반응형 커뮤니티 포럼 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 그리드 레이아웃, 대화형 요소를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다