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.
Código HTML
<div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
</div>
<p class="text-gray-700 dark:text-gray-300">This is a great place to discuss various topics and share ideas with others. Feel free to start a conversation!</p>
<img src="https://picsum.photos/400/200" alt="Community Discussion" class="rounded-lg shadow mt-2">
<div class="mt-3">
<span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 1, 2023</span>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>
</div>
<p class="text-gray-700 dark:text-gray-300">I love the community here! Everyone is so friendly and welcoming. Looking forward to more discussions.</p>
<img src="https://picsum.photos/400/201" alt="Community Discussion" class="rounded-lg shadow mt-2">
<div class="mt-3">
<span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 2, 2023</span>
</div>
</div>
</div>
<div class="mt-6">
<h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Join the Conversation</h4>
<textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="Share your thoughts..."></textarea>
<button class="mt-2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
</div>
</div>Componentes relacionados
Componente del Foro de Finanzas Art Deco
Un componente de foro de la comunidad simple y receptivo diseñado en un estilo Art Deco apagado adecuado para interfaces financieras y bancarias, con soporte para modo oscuro.
Componente del Foro de la Comunidad
Un componente del foro de la comunidad al estilo Neumorphism con avatares, hilos y un tema oscuro.
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.