CCHub Logo CCHub Tailwind Collection
コンポーネント コミュニティフォーラム コミュニティフォーラムコンポーネント

コミュニティフォーラムコンポーネント

ソーシャルメディア用のグレースケールのシンプルなブルータリストコミュニティフォーラムコンポーネントで、レスポンシブデザインとダークモードがサポートされています。

プレビュー

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>

関連コンポーネント

コミュニティフォーラムコンポーネント

Tailwind CSS を使用してマテリアルデザインの原則で設計されたレスポンシブコミュニティフォーラムコンポーネントで、ダークテーマのサポートとプレースホルダー画像が特徴です。

開ける

コミュニティフォーラムコンポーネント

スキューモーフィック要素を使用して設計されたコミュニティフォーラムコンポーネントで、レスポンシブデザイン、ダークテーマのサポート、アバターとプレースホルダーの画像が特徴です。

開ける

コミュニティフォーラムコンポーネント

Tailwind CSSを使用してダークモードでスタイル設定されたレスポンシブコミュニティフォーラムコンポーネント。このコンポーネントは、目の疲れを軽減するために暗い背景を特徴とし、アバターやフォーラムの投稿のプレースホルダー画像が含まれています。

開ける