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

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

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

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

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>

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

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

Адаптивный компонент Community Forum, разработанный в соответствии с принципами Material Design с использованием Tailwind CSS, с поддержкой темных тем и изображениями-заполнителями.

Открытый

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

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

Открытый

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

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

Открытый