Componente del Foro de la Comunidad
Un componente de foro comunitario simple y brutalista en escala de grises para redes sociales, con diseño receptivo y soporte para modo oscuro.
Código 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>Componentes relacionados
Componente del Foro de la Comunidad
Un componente minimalista del foro de la comunidad para el comercio electrónico, con un diseño limpio, una combinación de colores triádica y compatibilidad con el modo oscuro.
Componente del Foro de la Comunidad
Un componente simple del foro de la comunidad con una combinación de colores pastel, influencias de Material Design y compatibilidad con el modo oscuro. Cuenta con un diseño responsivo para el consumo de blog/contenido.
Foro de la Comunidad Componente 9
Un componente del Foro de la Comunidad con un diseño de morfismo de vidrio con elementos translúcidos similares al vidrio esmerilado, efectos receptivos y compatibilidad con temas oscuros.