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
Un componente responsivo del Foro de la Comunidad diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición.
Componente del Foro de la Comunidad
Un componente responsivo del foro de la comunidad diseñado en modo oscuro usando Tailwind CSS. El componente presenta un fondo oscuro para reducir la fatiga visual e incluye imágenes de marcador de posición para avatares y publicaciones en foros.
Componente del Foro Comunitario Brutalista
Un componente de foro comunitario de estilo brutalista para interfaces de redes sociales con colores vibrantes, complejidad moderada y compatibilidad con modo oscuro. Cuenta con una lista de publicaciones en el foro con tipografía audaz, elementos de alto contraste y diseños asimétricos típicos del diseño brutalista. Incluye elementos de publicación con avatares de usuario, botones de interacción y una estética cruda e intencionalmente cruda con acentos de colores vibrantes.