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

Community Forum 구성 요소

Material Design 원칙, 가을 색 구성표로 설계된 반응형 커뮤니티 포럼 구성 요소로, 교육 플랫폼에 적합합니다. 다크 모드 지원, 그리드 레이아웃, 토론 주제 및 사용자 아바타가 포함됩니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-center mb-6 sm:mb-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
      <h1 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-300 mb-2 sm:mb-0">Community Discussions</h1>
      <div class="flex items-center space-x-2">
        <button class="px-4 py-2 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white rounded-md shadow-sm transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
          </svg>
          New Topic
        </button>
        <select class="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
          <option>Sort by: Latest</option>
          <option>Sort by: Popular</option>
          <option>Sort by: Unanswered</option>
        </select>
      </div>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Categories/Topics Sidebar (md:col-span-1 for desktop) -->
      <aside class="md:col-span-1">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md mb-6">
          <h2 class="text-lg font-semibold text-amber-700 dark:text-amber-400 mb-4">Categories</h2>
          <ul class="space-y-2 text-gray-700 dark:text-gray-300">
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">General Discussion</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Course Q&A</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Project Showcases</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Study Groups</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Announcements</a></li>
          </ul>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-amber-700 dark:text-amber-400 mb-4">Popular Tags</h2>
          <div class="flex flex-wrap gap-2">
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#Python</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#WebDev</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#DataScience</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#MachineLearning</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#Algorithms</a>
          </div>
        </div>
      </aside>

      <!-- Discussion Topics List (md:col-span-2 or 3 for desktop) -->
      <section class="md:col-span-2 lg:col-span-3 space-y-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago in <span class="text-amber-700 dark:text-amber-400">Course Q&A</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Understanding Recursion in Python</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I'm struggling to grasp the concept of recursion. Can someone explain it with a simple example? Especially how the call stack works...</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>15 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>230 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 5 hours ago in <span class="text-amber-700 dark:text-amber-400">Project Showcases</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">My First Machine Learning Project: Predicting House Prices</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I just finished my first end-to-end ML project and wanted to share it with the community! Any feedback or suggestions would be greatly appreciated...</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>28 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>480 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Emily White</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 1 day ago in <span class="text-amber-700 dark:text-amber-400">Study Groups</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Looking for Study Group for Advanced Algorithms</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">Hi everyone, I'm taking the Advanced Algorithms course and would love to form a study group to go over concepts and practice problems...</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>8 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>190 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Michael Brown</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 days ago in <span class="text-amber-700 dark:text-amber-400">General Discussion</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Best Resources for Learning React Hooks?</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I'm looking for recommendations on the best online resources, tutorials, or courses to learn React Hooks effectively. Any suggestions?</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>20 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>350 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

관련 구성 요소

Community Forum 구성 요소

다크 모드를 지원하는 미니멀리스트 커뮤니티 포럼 구성 요소입니다. 이 구성 요소는 포트폴리오용으로 설계되었으며 흙색 색상의 간단한 레이아웃을 특징으로 합니다.

열다

Community Forum 구성 요소

소셜 미디어용 회색조의 단순하고 야만적인 커뮤니티 포럼 구성 요소로, 반응형 디자인과 다크 모드를 지원합니다.

열다

Brutalist Community Forum 구성 요소

소셜 미디어를 위한 브루탈리즘 스타일의 커뮤니티 포럼 구성 요소는 생생한 색상, 적당한 복잡성 및 다크 모드 지원을 제공합니다. 대담한 타이포그래피, 고대비 요소, 브루탈리즘 디자인의 전형적인 비대칭 레이아웃이 포함된 포럼 게시물 목록이 있습니다. 사용자 아바타, 상호 작용 버튼, 생생한 색상 악센트가 있는 원시적이고 의도적으로 조잡한 미학이 있는 게시물 항목이 포함됩니다.

열다