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>

관련 구성 요소

Community Forum 구성 요소

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

열다

Community Forum 구성 요소

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

열다

Community Forum 구성 요소

부동산 플랫폼을 위한 간단한 사이버펑크 테마의 커뮤니티 포럼 구성 요소로, 어두운 배경, 네온 액센트, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.

열다