구성 요소 커뮤니티 포럼 Community Forum 구성 요소

Community Forum 구성 요소

스포츠/피트니스 애플리케이션용으로 설계된 간단하고 깔끔하며 신뢰할 수 있는 커뮤니티 포럼 구성 요소로, 멀티 컬러 그라데이션 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

미리 보기

HTML 코드

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto font-sans">
  <div class="text-center mb-6 sm:mb-8">
    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold pb-2 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
      Team Talk Hub
    </h2>
    <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed">
      Connect with your teammates and discuss game strategies.
    </p>
  </div>

  <div class="space-y-4">
    <!-- Forum Post 1 -->
    <article class="bg-white dark:bg-gray-800 p-4 sm:p-5 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:shadow-lg">
      <div class="flex items-center mb-3">
        <img class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-transparent bg-gradient-to-r from-blue-500 to-purple-500 p-0.5" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar of John Doe">
        <div>
          <h4 class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">John Doe</h4>
          <p class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm">2 hours ago</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base leading-relaxed mb-3">
        Great effort everyone in training today! Let's keep up the intensity for Saturday's match. Any thoughts on offensive plays?
      </p>
      <button class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Reply
      </button>
    </article>

    <!-- Forum Post 2 -->
    <article class="bg-white dark:bg-gray-800 p-4 sm:p-5 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:shadow-lg">
      <div class="flex items-center mb-3">
        <img class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-transparent bg-gradient-to-r from-teal-500 to-cyan-500 p-0.5" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar of Jane Smith">
        <div>
          <h4 class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">Jane Smith</h4>
          <p class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm">1 hour ago</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base leading-relaxed mb-3">
        I agree, John! Maybe we could try that new set piece we practiced? It felt really strong. Looking forward to the game!
      </p>
      <button class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Reply
      </button>
    </article>
  </div>

  <div class="mt-6 sm:mt-8">
    <button class="w-full py-2 px-4 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 dark:from-purple-500 dark:via-pink-500 dark:to-red-500 hover:from-purple-700 hover:via-pink-700 hover:to-red-700 dark:hover:from-purple-600 dark:hover:via-pink-600 dark:hover:to-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
      Create New Post
    </button>
  </div>
</div>

관련 구성 요소

커뮤니티 포럼 구성 요소 - Glassmorphism E-commerce

전자 상거래를 위한 glassmorphism 스타일의 커뮤니티 포럼 구성 요소로, 반투명 요소, 흐림 효과 및 트라이어딕 색 구성표를 특징으로 합니다. 다크 모드 지원으로 반응형.

열다

커뮤니티 포럼 구성 요소 - 레트로 오션 블루

80년대/90년대 복고풍 분위기의 단순하고 반응이 빠른 커뮤니티 포럼 구성 요소로, 직업 및 경력 플랫폼을 위해 설계되었습니다. 오션 블루 색 구성표와 다크 모드 지원이 특징입니다.

열다

Community Forum 구성 요소

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

열다