Componente del Foro de la Comunidad
Un componente simple del foro de la comunidad que utiliza los principios de Material Design, adaptado para el consumo de contenido del blog con una combinación de colores de tonos tierra y un diseño receptivo para la compatibilidad con el modo oscuro.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
<div class="mb-4">
<h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Latest Discussions</h3>
<ul class="list-disc list-inside space-y-3 mt-2">
<li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1">
<div>
<p class="text-gray-800 dark:text-white font-bold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">What are your thoughts on the new features?</p>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</li>
<li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User 2">
<div>
<p class="text-gray-800 dark:text-white font-bold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Can someone recommend a good blog to follow?</p>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
</li>
</ul>
</div>
<div class="mt-6">
<h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Create a new topic</h3>
<form class="mt-4">
<textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="What's on your mind?"></textarea>
<button class="mt-2 bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none" type="submit">Post</button>
</form>
</div>
</div>Componentes relacionados
Componente del Foro de la Comunidad - Art Deco Monocromático
Un componente de foro comunitario receptivo diseñado con una estética Art Deco utilizando un esquema de color monocromático, adecuado para aplicaciones de tecnología/SaaS. Cuenta con soporte para modo oscuro y elementos interactivos.
Componente del Foro de la Comunidad
Un componente de foro de la comunidad retro / vintage para comercio electrónico con una combinación de colores vibrantes. Diseño responsivo con soporte para temas oscuros.
Componente del Foro de la Comunidad
Un componente receptivo del foro de la comunidad diseñado en estilo Glassmorphism con tonos tierra, adecuado para plataformas de redes sociales. Cuenta con un efecto de vidrio esmerilado y es compatible con el modo oscuro.