Componente del forum della community
Un componente reattivo del forum della community progettato con i principi di Material Design utilizzando Tailwind CSS, con supporto per temi scuri e immagini segnaposto.
Codice 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>Componenti correlati
Componente del forum della community
Un componente del forum della comunità in stile neumorfismo con avatar, thread e un tema scuro.
Componente del forum della community
Un componente del forum della community progettato con elementi scheumorfici, con design reattivo, supporto per temi scuri e immagini avatar e segnaposto.
Componente del forum della community
Un componente del forum della community retrò/vintage per l'e-commerce con una combinazione di colori vivaci. Design reattivo con supporto per temi scuri.