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

Community Forum 구성 요소

커뮤니티 포럼 Glassmorphism 디자인, 생생한 색 구성표, 복잡한 복잡성 수준, 블로그/콘텐츠 목적, 어두운 테마를 지원하는 반응형 디자인, Tailwind CSS 사용

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="container mx-auto px-4">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-white mb-8">Community Forum</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Forum Categories -->
      <div class="md:col-span-2 backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-lg p-6 shadow-lg">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Categories</h2>
        
        <!-- Category Card -->
        <div class="mb-4 p-4 backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-md flex items-center justify-between">
          <div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">General Discussion</h3>
            <p class="text-gray-600 dark:text-gray-300">Discuss anything and everything.</p>
          </div>
          <span class="text-sm font-semibold text-blue-600 dark:text-blue-400">500+ Topics</span>
        </div>
        
        <!-- Category Card -->
        <div class="mb-4 p-4 backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-md flex items-center justify-between">
          <div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Announcements</h3>
            <p class="text-gray-600 dark:text-gray-300">Important news and updates.</p>
          </div>
          <span class="text-sm font-semibold text-green-600 dark:text-green-400">100+ Topics</span>
        </div>

        <!-- Add More Categories -->

      </div>

      <!-- Recent Activity -->
      <div class="backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-lg p-6 shadow-lg">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h2>

        <!-- Activity Item -->
        <div class="mb-4 pb-4 border-b border-gray-300 dark:border-gray-600 last:border-b-0">
          <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold text-gray-800 dark:text-white">John Doe</span> posted in <span class="font-semibold text-blue-600 dark:text-blue-400">General Discussion</span></p>
          <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>

        <!-- Activity Item -->
        <div class="mb-4 pb-4 border-b border-gray-300 dark:border-gray-600 last:border-b-0">
          <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold text-gray-800 dark:text-white">Jane Smith</span> replied in <span class="font-semibold text-green-600 dark:text-green-400">Announcements</span></p>
          <p class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</p>
        </div>

        <!-- Add More Activity -->

      </div>
    </div>
  </div>
</div>

관련 구성 요소

Brutalist Community Forum 구성 요소

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

열다

Community Forum 구성 요소

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

열다

Community Forum 구성 요소

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

열다