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

Community Forum 구성 요소

간단하고 반응이 빠른 커뮤니티 포럼 구성 요소로, 일몰에서 영감을 받은 따뜻한 색 구성표가 있어 데이트 또는 소셜 플랫폼에 적합합니다. 머티리얼 디자인과 같은 그림자가 특징이며 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in transition-shadow duration-300 dark:shadow-2xl dark:shadow-orange-900/20">
    <div class="bg-gradient-to-r from-orange-400 to-red-500 p-4 sm:p-5 flex items-center justify-between shadow-md">
      <h2 class="text-white text-lg sm:text-xl font-semibold">Community Buzz</h2>
      <button class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
      </button>
    </div>

    <div class="p-4 sm:p-5 space-y-4">
      <!-- Forum Post 1 -->
      <div class="flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-orange-300 dark:ring-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between">
            <p class="font-semibold text-gray-800 dark:text-gray-100 text-sm sm:text-base">Sarah_Loves_Sunsets</p>
            <span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mt-0.5">"Anyone else feel like this community has the best vibes? So much positivity! ✨"</p>
          <div class="flex items-center space-x-3 mt-2">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              54
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              12
            </button>
          </div>
        </div>
      </div>

      <hr class="border-gray-200 dark:border-gray-700">

      <!-- Forum Post 2 -->
      <div class="flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-orange-300 dark:ring-orange-600 object-cover" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between">
            <p class="font-semibold text-gray-800 dark:text-gray-100 text-sm sm:text-base">Traveler_Mike</p>
            <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mt-0.5">"Just joined! Looking forward to connecting with amazing people here. Where's everyone from?"</p>
          <div class="flex items-center space-x-3 mt-2">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              31
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              8
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="p-4 sm:p-5 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3">
        <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Your Avatar">
        <input type="text" placeholder="Write a new post..." class="flex-1 p-2 sm:p-2.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 dark:border-none border border-gray-300">
        <button class="p-2 rounded-full bg-orange-500 text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Community Forum 구성 요소

Tailwind CSS로 구축된 소셜 미디어 목적을 위해 Skeuomorphism 디자인, 트라이어드 색 구성표 및 단순 복잡성을 갖춘 커뮤니티 포럼 구성 요소입니다. 반응형 디자인과 어두운 테마 지원이 포함됩니다.

열다

Community Forum 구성 요소

소셜 미디어 플랫폼에 적합한 Earth 톤의 Glassmorphism 스타일로 설계된 반응형 Community Forum 구성 요소입니다. 젖빛 유리 효과가 특징이며 다크 모드와 호환됩니다.

열다

Community Forum 구성 요소

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

열다