Компоненты Форум сообщества Компонент форума сообщества

Компонент форума сообщества

Простой, брутальный компонент форума сообщества в оттенках серого для социальных сетей, с адаптивным дизайном и поддержкой темного режима.

Предварительный просмотр

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>

Связанные компоненты

Компонент форума сообщества

Отзывчивый и интерактивный компонент форума сообщества со стилем дизайна Neumorphism, подходящий для деловых/корпоративных сайтов, поддерживающий как светлую, так и темную тематику.

Открытый

Компонент форума сообщества

Минималистичный компонент форума сообщества для электронной коммерции, отличающийся чистым дизайном, триадической цветовой схемой и поддержкой темного режима.

Открытый

Компонент форума сообщества

Отзывчивый компонент форума сообщества, выполненный в стиле Glassmorphism с земляными тонами, подходит для платформ социальных сетей. Он имеет эффект матового стекла и совместим с темным режимом.

Открытый