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

Community Forum 구성 요소

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

미리 보기

HTML 코드 

<div class="bg-white dark:bg-black text-black dark:text-white min-h-screen p-4">
  <div class="container mx-auto">
    <h1 class="text-2xl font-bold mb-4 text-center">Community Forum</h1>
    <div class="space-y-4">
      <!-- Forum Post -->
      <div class="border border-black dark:border-white p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
          <p class="font-bold">User One</p>
        </div>
        <p class="mb-2">This is a sample forum post content.</p>
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
          <span>Posted on: 2023-10-27</span>
          <span>Replies: 5</span>
        </div>
      </div>

      <!-- Forum Post -->
      <div class="border border-black dark:border-white p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
          <p class="font-bold">User Two</p>
        </div>
        <p class="mb-2">Another example forum post here.</p>
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
          <span>Posted on: 2023-10-27</span>
          <span>Replies: 10</span>
        </div>
      </div>

       <!-- Forum Post -->
      <div class="border border-black dark:border-white p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
          <p class="font-bold">User Three</p>
        </div>
        <p class="mb-2">Yet another example forum post to fill the space.</p>
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
          <span>Posted on: 2023-10-27</span>
          <span>Replies: 2</span>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Community Forum 구성 요소

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

열다

Community Forum 구성 요소

전자 상거래를 위한 미니멀리스트 커뮤니티 포럼 구성 요소로, 깔끔한 디자인, 트라이어딕 색 구성표 및 다크 모드 지원을 특징으로 합니다.

열다

Community Forum 구성 요소

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

열다