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
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.
Componente del Foro de la Comunidad
Componente del foro de la comunidad con diseño de neumorfismo, combinación de colores en escala de grises y complejidad simple para redes sociales utilizando Tailwind CSS. Diseño responsivo con soporte para temas oscuros.
Componente del Foro de la Comunidad
Un componente de foro de la comunidad simple, limpio y receptivo diseñado con un estilo de tipografía suiza / internacional, con un sutil degradado multicolor y soporte de modo oscuro, adecuado para sitios web comerciales / corporativos.