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

Community Forum 구성 요소

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

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-md">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Community Forum</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/100" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">John Doe</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Understanding Material Design</h2>
        <p class="text-gray-600 dark:text-gray-300">This post discusses the key principles of Material Design and how to implement them effectively using Tailwind CSS.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/101" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/women/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">Jane Smith</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Tailwind CSS for Beginners</h2>
        <p class="text-gray-600 dark:text-gray-300">A beginner's guide to Tailwind CSS, exploring its utility-first approach and customization options.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/102" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">Michael Johnson</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Accessibility in Design</h2>
        <p class="text-gray-600 dark:text-gray-300">Exploring the importance of accessibility in design and how to ensure your designs are inclusive.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/103" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/women/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">Emily Davis</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Responsive Web Design</h2>
        <p class="text-gray-600 dark:text-gray-300">Learn how to create responsive web designs that adapt to different screen sizes and devices.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Community Forum 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 원칙에 따라 설계된 반응형 커뮤니티 포럼 구성요소로, 어두운 테마 지원 및 자리표시자 이미지를 제공합니다.

열다

Community Forum 구성 요소

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

열다

Community Forum 구성 요소

포트폴리오를 위한 Neumorphism 스타일의 커뮤니티 포럼 구성 요소로, 파스텔 색상 구성표와 어두운 테마를 지원하는 복잡하고 반응이 빠른 디자인을 특징으로 합니다. 여기에는 포럼 목록, 최근 활동 및 사용자 프로필이 포함되며, 모두 JavaScript 없이 Tailwind CSS를 사용하여 구현됩니다.

열다